Sending data from websites to overlays

If you need to send any data or value from your website to your overlays, you can use two ways.

Method #1

You need to create a field on your website. That is the source of your data that can be sent to Picreel. The field should look similar to:

 

 

<p> &lt;img class=&quot;cke_hidden&quot; data-cke-realelement=&quot;%3Cinput%20type%3D%22hidden%22%20id%3D%22test1%22%20class%3D%22picreel-popup-data%22%20value%3D%22123%22%20data-cke-editable%3D%221%22%20contenteditable%3D%22false%22%20%2F%3E&quot; data-cke-real-node-type=&quot;1&quot; alt=&quot;Скрытое поле&quot; title=&quot;Скрытое поле&quot; align=&quot;&quot; src=&quot;https://help.picreel.com/assets/grocery_crud/texteditor/ckeditor/images/spacer.gif?t=C9A85WF&quot; data-cke-real-element-type=&quot;hiddenfield&quot; /&gt;</p>

 

 

Method #2

There is another way to send values from your website to overlay form, which is done via JS. In this case you need to add "picreel_popup_loaded" event listener on your website.

 

 

document.addEventListener(&#39;picreel_popup_loaded&#39;, function(){ var data = { somedata1: &quot;some value 1&quot;, somedata2: &quot;some value 2&quot;, }; picreel.api.push(&#39;send_data_picreel&#39;, data); });

 

 

 

In the listener you need to create an object that will contain key and value. The key is "id" part of "hidden" field in the overlay form, which is assigned to some value.

 

API method picreel.api.push('send_data_picreel', data) is responsible for sending the data. Here, data is the previously created object. Picreel development team recommends to send the data before overlay triggers.

 

 

After you choose the method, please follow these reccomendations: 

When you create an overlay, you need to add "hidden" fields for each element of data object. 

Example: If you need to send the value “123” to Picreel overlay, and the id of the field is “test1”, you need to place this line in your Picreel overlay:

 

 

<em>&amp;amp;lt;img class=&quot;cke_hidden&quot; data-cke-realelement=&quot;%3Cinput%20type%3D%22hidden%22%20id%3D%22test1%22%20value%3D%22%22%20data-cke-editable%3D%221%22%20contenteditable%3D%22false%22%20%2F%3E&quot; data-cke-real-node-type=&quot;1&quot; alt=&quot;Скрытое поле&quot; title=&quot;Скрытое поле&quot; align=&quot;&quot; src=&quot;https://help.picreel.com/assets/grocery_crud/texteditor/ckeditor/images/spacer.gif?t=C9A85WF&quot; data-cke-real-element-type=&quot;hiddenfield&quot; /&amp;amp;gt;</em>

 

 

The data from website is set in these fields. Please, note that "name" should be identified and can be different from "id".

 

 

Do that for any value you need to send -- a field on your website, and the same field in your Picreel overlay. Use Picreel’s HTML editor to modify your overlays.

 

Data is sent before overlay is displayed.

 

So, if you need to send the value “123” to Picreel overlay, and the id of the field is “test1”, you need to place this line in your Picreel overlay:

 

 

&lt;img class=&quot;cke_hidden&quot; data-cke-realelement=&quot;%3Cinput%20type%3D%22hidden%22%20id%3D%22test1%22%20value%3D%22%22%20data-cke-editable%3D%221%22%20contenteditable%3D%22false%22%20%2F%3E&quot; data-cke-real-node-type=&quot;1&quot; alt=&quot;Скрытое поле&quot; title=&quot;Скрытое поле&quot; align=&quot;&quot; src=&quot;https://help.picreel.com/assets/grocery_crud/texteditor/ckeditor/images/spacer.gif?t=C9A85WF&quot; data-cke-real-element-type=&quot;hiddenfield&quot; /&gt;

 

 

Do that for any value you need to send -- a field on your website, and the same field in your Picreel overlay. Use Picreel’s HTML editor to modify your overlays.

Data is sent before overlay is displayed.

Do that for any value you need to send -- a field on your website, and the same field in your Picreel overlay. Use Picreel’s HTML editor to modify your overlays.

Data is sent before overlay is displayed.