Embedding Layered Popups into website

To embed Layered Popups into any website you need perform the following steps:

Make sure that your website loads jQuery version 1.8 or higher.
Make sure that your website has DOCTYPE. If not, add the following line as a first line of HTML-document:
```
<!DOCTYPE html>
```
Copy the following JS-snippet and paste it into your website. You need paste it at the end of <body> section (above closing </body> tag).
That's it. Integration finished. :-)

Using Popups

There are several ways how you can use popups on your website.

To raise the popup by clicking certain element (OnClick popup), add the following onclick handler to that element:
```
onclick="return ulp_open('OBJECT_ID');"
```
OBJECT_ID is a popup ID taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign ID taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns").
Example:
```
<a href="#" onclick="return ulp_open('OBJECT_ID');">Raise the popup</a>
```
Another way to raise the popup by clicking link (OnClick popup) is to use the following URL:
```
#ulp-OBJECT_ID
```
OBJECT_ID is a popup ID taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign ID taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns").
Example:
```
<a href="#ulp-OBJECT_ID">Raise the popup</a>
```
If you want to raise different popup for desktops/laptops/tablets and smartphones, use URL like that:
```
#ulp-OBJECT1_ID*OBJECT2_ID
```
OBJECT1_ID and OBJECT2_ID are popups ID taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign ID taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns"). OBJECT1_ID is a popup/campaign for desktops/laptops/tablets. OBJECT2_ID is a popup/campaign for smartphones.
Example:
```
<a href="#ulp-OBJECT1_ID*OBJECT2_ID">Raise the popup</a>
```
To raise the popup, when website loaded (OnLoad popup), add the following JS-code to your page. It must be inserted below remote.min.js.
```
<script>
ulp_add_event("onload", {
	popup:		"OBJECT1_ID",
	popup_mobile:	"OBJECT2_ID",
	mode:		"every-time",
	period:		5,
	delay:		0,
	close_delay:	0
});
</script>
```
As you can see function ulp_add_event("onload", ..) accept an object with several parameters:
- popup, popup_mobile. Popup IDs taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign IDs taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns"). At least one of these parameters must be defined. Popup defined as popup_mobile will be displayed on smartphones only.
- mode. Select how often OnLoad popup must be displayed. You can use one of the following values:
  - every-time. The popup is displayed every time until the user has submitted a subscription form.
  - once-session. The popup is displayed once per session until the user has submitted a subscription form. Session is a browser's session. Usually session ends when user close browser. Sometimes it ends when user reboot PC.
  - once-period. The popup is displayed once per X days (defined as period parameter) until the user has submitted a subscription form.
  - once-only. The popup is displayed only once.
  - none. The popup will never be displayed.
- period. Set period (in days) when mode is set as once-period. This parameter is ignored in all other cases.
- delay. The popup can be displayed with certain delay when page loaded. This parameter defines delay (in seconds).
- close_delay. The popup can be automatically closed after certain delay. This parameter defines delay (in seconds). Set 0 (zero) or omit parameter to disable this feature.
Example 1. You want to display popup with ID yoZ8KupKSHejiwyZ once per session, without delays and for all kind of devices (desktops, tablets, smartphones).
```
<script>
ulp_add_event("onload", {
	popup:		"yoZ8KupKSHejiwyZ",
	mode:		"once-session"
});
</script>
```
Example 2. You want to display popup with ID yv4RG8hfkSBb4up9 for smartphones only, every time, with start delay 10 seconds and without autoclosing feature.
```
<script>
ulp_add_event("onload", {
	popup_mobile:	"yv4RG8hfkSBb4up9",
	mode:		"every-time",
	delay:		10
});
</script>
```
Please rememeber, you can use ulp_add_event("onload", ..) only once per page. If you insert it several times with different parameters, only last one will work.
To raise the popup, when user scroll down website's page (OnScroll popup), add the following JS-code to your page. It must be inserted below remote.min.js.
```
<script>
ulp_add_event("onscroll", {
	popup:		"OBJECT1_ID",
	popup_mobile:	"OBJECT2_ID",
	mode:		"every-time",
	period:		5,
	offset:		"600"
});
</script>
```
As you can see function ulp_add_event("onscroll", ..) accept an object with several parameters:
- popup, popup_mobile. Popup IDs taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign IDs taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns"). At least one of these parameters must be defined. Popup defined as popup_mobile will be displayed on smartphones only.
- mode. Select how often OnScroll popup must be displayed. You can use one of the following values:
  - every-time. The popup is displayed every time until the user has submitted a subscription form.
  - once-session. The popup is displayed once per session until the user has submitted a subscription form. Session is a browser's session. Usually session ends when user close browser. Sometimes it ends when user reboot PC.
  - once-period. The popup is displayed once per X days (defined as period parameter) until the user has submitted a subscription form.
  - once-only. The popup is displayed only once.
  - none. The popup will never be displayed.
- period. Set period (in days) when mode is set as once-period. This parameter is ignored in all other cases.
- offset. The popup is displayed when user scroll down to this number of pixels. If you want this value to be in %, just add % symbol, like this: offset: "80%".
Please rememeber, you can use ulp_add_event("onscroll", ..) only once per page. If you insert it several times with different parameters, only last one will work.
To raise the popup, when user moves mouse cursor to top edge of browser window, assuming that he/she is going to leave the page (OnExit popup), add the following JS-code to your page. It must be inserted below remote.min.js.
```
<script>
ulp_add_event("onexit", {
	popup:		"OBJECT_ID",
	mode:		"every-time",
	period:		5
});
</script>
```
As you can see function ulp_add_event("onexit", ..) accept an object with several parameters:
- popup. Popup ID taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign ID taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns").
- mode. Select how often OnExit popup must be displayed. You can use one of the following values:
  - every-time. The popup is displayed every time until the user has submitted a subscription form.
  - once-session. The popup is displayed once per session until the user has submitted a subscription form. Session is a browser's session. Usually session ends when user close browser. Sometimes it ends when user reboot PC.
  - once-period. The popup is displayed once per X days (defined as period parameter) until the user has submitted a subscription form.
  - once-only. The popup is displayed only once.
  - none. The popup will never be displayed.
- period. Set period (in days) when mode is set as once-period. This parameter is ignored in all other cases.
Please rememeber, you can use ulp_add_event("onexit", ..) only once per page. If you insert it several times with different parameters, only last one will work.
To raise the popup, when user does nothing on website for certain period of time (OnInactivity popup), add the following JS-code to your page. It must be inserted below remote.min.js.
```
<script>
ulp_add_event("onidle", {
	popup:		"OBJECT1_ID",
	popup_mobile:	"OBJECT2_ID",
	mode:		"every-time",
	period:		5,
	delay:		60
});
</script>
```
As you can see function ulp_add_event("onidle", ..) accept an object with several parameters:
- popup, popup_mobile. Popup IDs taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign IDs taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns"). At least one of these parameters must be defined. Popup defined as popup_mobile will be displayed on smartphones only.
- mode. Select how often OnInactivity popup must be displayed. You can use one of the following values:
  - every-time. The popup is displayed every time until the user has submitted a subscription form.
  - once-session. The popup is displayed once per session until the user has submitted a subscription form. Session is a browser's session. Usually session ends when user close browser. Sometimes it ends when user reboot PC.
  - once-period. The popup is displayed once per X days (defined as period parameter) until the user has submitted a subscription form.
  - once-only. The popup is displayed only once.
  - none. The popup will never be displayed.
- period. Set period (in days) when mode is set as once-period. This parameter is ignored in all other cases.
- delay. The popup is displayed after this period of user's inactivity (in seconds).
Please rememeber, you can use ulp_add_event("onidle", ..) only once per page. If you insert it several times with different parameters, only last one will work.
To raise the popup, when AdBlock detected (OnAdBlockDetected popup), add the following JS-code to your page. It must be inserted below remote.min.js. Please notice, this is an experimental feature and can be deleted in future releases.
```
<script>
ulp_add_event("onabd", {
	popup:		"OBJECT1_ID",
	popup_mobile:	"OBJECT2_ID",
	mode:		"every-time",
	period:		5
});
</script>
```
As you can see function ulp_add_event("onabd", ..) accept an object with several parameters:
- popup, popup_mobile. Popup IDs taken from relevant column on Popups page (menu "Layered Popups >> Popups"), or A/B campaign IDs taken form relevant column on A/B Campaigns page (menu "Layered Popups >> A/B Campaigns"). At least one of these parameters must be defined. Popup defined as popup_mobile will be displayed on smartphones only.
- mode. Select how often OnAdBlockDetected popup must be displayed. You can use one of the following values:
  - every-time. The popup is displayed every time until the user has submitted a subscription form.
  - once-session. The popup is displayed once per session until the user has submitted a subscription form. Session is a browser's session. Usually session ends when user close browser. Sometimes it ends when user reboot PC.
  - once-period. The popup is displayed once per X days (defined as period parameter) until the user has submitted a subscription form.
  - once-only. The popup is displayed only once.
  - none. The popup will never be displayed.
- period. Set period (in days) when mode is set as once-period. This parameter is ignored in all other cases.
Please rememeber, you can use ulp_add_event("onabd", ..) only once per page. If you insert it several times with different parameters, only last one will work.
To embed the popup into page and display it as a part of its content, use the following HTML shortcode:
```
<div class="ulp-inline" data-id="POPUP_ID"></div>
```
POPUP_ID is a popup ID taken from relevant column on Popups page (menu "Layered Popups >> Popups").
To lock links you need construct locking URL. In general locking URL looks like:
```
#ulp-POPUP_ID:BASE64_ENCODED_ORIGINAL_URL
```
POPUP_ID is a popup ID taken from relevant column on Popups page (menu "Layered Popups >> Popups").
BASE64_ENCODED_ORIGINAL_URL is an original URL encoded using base64 algorithm. There are a lot of free online services that allows to encode/decode using base64 algorithm. For example: https://www.base64encode.org/.
If you want to have different popups for desktops/tablets and smartphones, use the following locking URL:
```
#ulp-POPUP1_ID*POPUP2_ID:BASE64_ENCODED_ORIGINAL_URL
```
POPUP1_ID is a popup ID that will be displayed for desktops/tablets. It's taken from relevant column on Popups page (menu "Layered Popups >> Popups").
POPUP2_ID is a popup ID that will be displayed for smartphones. It's taken from relevant column on Popups page (menu "Layered Popups >> Popups").
BASE64_ENCODED_ORIGINAL_URL is an original URL encoded using base64 algorithm. There are a lot of free online services that allows to encode/decode using base64 algorithm. For example: https://www.base64encode.org/.
Example:
Imagine that we have popup with ID QWERTYUIOP. With this popup we want to lock link which has URL http://website.com/path-to/file.html. Base64 encoded URL would be aHR0cDovL3dlYnNpdGUuY29tL3BhdGgtdG8vZmlsZS5odG1s and locking URL:
```
#ulp-QWERTYUIOP:aHR0cDovL3dlYnNpdGUuY29tL3BhdGgtdG8vZmlsZS5odG1s
```
Use this URL for your link.