General

Barilliance's new generation popups are designed for easy set up and look great in different screen sizes. To get the most out of these tools, please follow the best practices below.

Start with a Template

Start your design by using a popup template in the Barilliance Editor. These templates have been tested on various screen sizes and devices.
All visual aspects such as fonts, images and colours can changed easily.

Using the Barilliance Editor

Easily create designs using our WYSIWYG

Click the section of the pop up you wish to edit. You can change any visual aspect in the right side menu.

To add a section such as image or text, click the 'CONTENT' tab. Once you've made your selection, drag the section into the popup.

Adding a 'Not Interested' Link

Add a "No thank you' link to a popup

Select a text section
Select -> Special Links-> Close popup/message-> Close popup/message.
This will output a text link which closes the popup when selected. You can edit the text and change its visual properties.

Always Test on Different Devices and Screen Sizes.

The popups may not look good on some screen sizes, or in some extreme cases, the close button cannot be reached to close the popup. Therefore it is important to test on a range of devices using the preview rule link. Note that the preview in the popup editor does not represent a real website behavior and therefore it is not enough for testing.

Dynamic Content Tokens

Dynamic content can be used in the texts by utilizing tokens. They will be replaced with the correct value when the popup is shown to users

%geo_country% - Will display the country the user is browsing from

%geo_flag_32% - Small flag flag icon

%geo_flag_48% - Bigger country flag icon

%geo_usstate% - Will display the US state the user is browsing from

%cart_total% - Total value of cart items e,g. 19.99, 13.00

%cart_total_uf% - Same as above without currency number formatting e.g. 19.99, 13

%free_shipping_amount% - The amount set in the settings page

%free_shipping_amount_uf% - Same as above without currency formatting

%amount_to_free_shipping% - Difference between current cart value and free shipping amount. (to show' add $12 for free shipping' message)
%amount_to_free_shipping_uf% - same as above without currency formatting

%weather% - Sunny, Clear, Rainy, Cloudy

%tempC% - 28

%tempF% 54
%price_drop_percent% - Percentage of price drop. Only has value if the rule has price drop definitions in Location-Product Page

%price_drop_days% - Days since price drop. Only has value if the rule has price drop definitions in Location-Product Page

Design Best Practices

Opening links in new tab

To open a url in a new tab enter newtab: before the url

Running Javascript from Button and Links Click

Javascript code can be triggered by a click on a button or link on the popups.
The popup closes automatically after the code is run.

To run JS code select Special Links on the editor and you will see the option to Run Javascript:

Under special links select run Javascript and you will see selection like this:

Once selected. a function will be called when the button is clicked. for example
cbarButtonClick_1234(1); where the number is the rule id.

To implement the function you can add Javascript action to the rule and write there:
cbarButtonClick_%rule_id% = function (a) {
if (a == '1') {
// code for the button with (1) in the parameter.
}
}

To implement the javascript function from anywhere in the site code implement the same with the specific rule id instead of %rule_id%
cbarButtonClick_1234 = function (a) {
if (a == '1') {
// code for the button with (1) in the parameter.
}
}