How to Send Website Data to Overlays


Picreel lets you send website data to overlays in multiple ways that can help you optimize the user experience.


Benefits of sending website data to overlays:


1. Personalize user experience by showcasing recent website data on overlays

2. Improve your conversion rates by engaging users with relevant offers


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:


<input class="picreel-popup-data" id="test1" type="hidden" value="123" />


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 the “picreel_popup_loaded” event listener on your website.


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

In the listener, you need to create an object that will contain keys and values. The key is the “id” part of the “hidden” field in the overlay form, 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 sending the data before overlay triggers.


After you choose the method, please follow these recommendations:

When creating an overlay, you need to add “hidden” fields for each data object element.


For 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:


<input id="test1" name="test1" type="hidden" value="" />

The data from the website is set in these fields. Please, note that “name” should be identified and 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 the overlay is displayed.


That is all about sending website data to overlays.



Was this information helpful?
© 2005 - 2023 ProProfs

On this page