Using Popups

22 Apr Using Popups

Posted at 16:51h in by
0 Likes
Standalone ScriptWordPress Plugin
Use the popup on any web pages. How to do it?

  1. Make sure that webpage has DOCTYPE. If not, add the following line as a first line of HTML-document.
  2. Make sure that website loads jQuery version 1.9 or higher. If not, add the following line into head section of HTML-document.
  3. Copy JS-snippet taken on Advanced Settings page in your admin panel and paste it into HTML-document. You need paste it at the end of body section (above closing </body> tag).
  4. Use any method described below.
OnClick (standard) Use the following URL with a link/button (href attribute):

OBJECT_SLUG is a popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page.
OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
OnClick (JavaScript) Add the following attribute to your HTML-element:

OBJECT_SLUG is a popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page.
OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
JavaScript Use the following javascript function to open the popup:

OBJECT_SLUG is a popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page.
OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
OnLoad (JavaScript) The alternate way to display the popup, when website loaded (OnLoad popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onload", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	delay:       0,
	close_delay: 0
});
</script>

As you can see function lepopup_add_event("onload", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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 the delay (in seconds).
close_delay – the popup can be automatically closed after certain delay. This parameter defines the delay (in seconds). Set 0 (zero) or omit parameter to disable this feature.

OnScroll (JavaScript) The alternate way to display the popup, when user scroll down the page (OnScroll popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onscroll", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	offset:      "600"
});
</script>

As you can see function lepopup_add_event("onscroll", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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%".

OnExit (JavaScript) The alternate way to display 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). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onexit", {
	item:        "OBJECT_SLUG",
	mode:        "every-time",
	period:      24
});
</script>

As you can see function lepopup_add_event("onexit", ..) accept an object with several parameters:
item – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used when mode is set as once-period. This parameter is ignored in all other cases.

OnInactivity (JavaScript) The alternate way to display the popup, when user does nothing on website for certain period of time (OnInactivity popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onidle", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	delay:       30
});
</script>

As you can see function lepopup_add_event("onidle", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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).

OnAdBlockDetected (JavaScript) The alternate way to display the popup, when AdBlock or similar software detected (OnAdBlockDetected popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onadb", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24
});
</script>

As you can see function lepopup_add_event("onadb", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used when mode is set as once-period. This parameter is ignored in all other cases.

Inline (HTML) Use the following HTML-snippet to embed the popup as inline object.

POPUP_SLUG is a popup slug taken from relevant column on Popups page.
OR

POPUP1_SLUG is a popup slug for desktops/laptops.
POPUP2_SLUG is a popup slug for mobiles.
Link locker (manual)

 You can lock access to certain links on your website. It means that when user clicks locked link, the popup appears. User must submit the popup form. After that link becomes available. You may have many different links locked by the same popup. Once the popup submitted all these links become available. Paste your popup slug and original URL below to generate Locking URL.


Locking URL.
OnClick (standard)

 Use the following URL with a link/button (href attribute):

OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
OnClick (JavaScript)

 Add the following attribute to your HTML-element:

OBJECT_SLUG is a popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page.
OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
JavaScript

 Use the following javascript function to open the popup:

OBJECT_SLUG is a popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page.
OR

OBJECT1_SLUG is an object slug (popup or campaign) for desktops/laptops.
OBJECT2_SLUG is an object slug (popup or campaign) for mobiles.
OnLoad (standard)

 To display certain popup, when website loaded (OnLoad popup), create OnLoad target (Green Popups >> Targeting) and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
OnLoad (JavaScript)

 The alternate way to display the popup, when website loaded (OnLoad popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onload", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	delay:       0,
	close_delay: 0
});
</script>

As you can see function lepopup_add_event("onload", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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 the delay (in seconds).
close_delay – the popup can be automatically closed after certain delay. This parameter defines the delay (in seconds). Set 0 (zero) or omit parameter to disable this feature.

OnScroll (standard)

 To display certain popup, when user scroll down the page (OnScroll popup), create OnScroll target and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
OnScroll (JavaScript)

 The alternate way to display the popup, when user scroll down the page (OnScroll popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onscroll", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	offset:      "600"
});
</script>

As you can see function lepopup_add_event("onscroll", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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%".

OnExit (standard)

 To display certain popup, when user moves mouse cursor to top edge of browser window, assuming that he/she is going to leave the page (OnExit popup), create OnExit target and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
OnExit (JavaScript)

 The alternate way to display 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). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onexit", {
	item:        "OBJECT_SLUG",
	mode:        "every-time",
	period:      24
});
</script>

As you can see function lepopup_add_event("onexit", ..) accept an object with several parameters:
item – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used when mode is set as once-period. This parameter is ignored in all other cases.

OnInactivity (standard)

 To display certain popup, when user does nothing on website for certain period of time (OnInactivity popup), create OnInactivity target and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
OnInactivity (JavaScript)

 The alternate way to display the popup, when user does nothing on website for certain period of time (OnInactivity popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onidle", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24,
	delay:       30
});
</script>

As you can see function lepopup_add_event("onidle", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used 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).

OnAdBlockDetected (standard)

 To display certain popup, when AdBlock or similar software detected (OnAdBlockDetected popup), create OnAdBlockDetected target and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
OnAdBlockDetected (JavaScript)

 The alternate way to display the popup, when AdBlock or similar software detected (OnAdBlockDetected popup). Insert the following JavaScript-snippet into body section of the page (between tags and ).

<script>
lepopup_add_event("onadb", {
	item:        "OBJECT1_SLUG",
	item_mobile: "OBJECT2_SLUG",
	mode:        "every-time",
	period:      24
});
</script>

As you can see function lepopup_add_event("onadb", ..) accept an object with several parameters:
item, item_mobile – popup slug taken from relevant column on Popups page or A/B campaign slug taken form relevant column on A/B Campaigns page. At least one of these parameters must be defined. Object defined as popup_mobile will is displayed on mobiles only.
mode – how often OnLoad popup must be displayed. You can use one of the following values:

  • every-time – the popup is displayed every time until user submit the popup’s form.
  • once-period – the popup is displayed once per period hours until submit user the popup’s form.
  • once-only – the popup is displayed only once.
  • none – the popup is never displayed.

period – period (in hours) is used when mode is set as once-period. This parameter is ignored in all other cases.

Inline (Gutenberg block)

 In case of using Gutenberg content editor you can add the popup as a standard Gutenberg Block. Find “Green Popups” under Widgets category.
Inline (shortcode)

 Use the following shortcode to embed the popup as inline object.

POPUP_SLUG is a popup slug taken from relevant column on Popups page.
OR

POPUP1_SLUG is a popup slug for desktops/laptops.
POPUP2_SLUG is a popup slug for mobiles.
Inline (PHP)

 Use the following PHP-code to embed the popup into theme files:

POPUP_SLUG is a popup slug taken from relevant column on Popups page.
OR

POPUP1_SLUG is a popup slug for desktops/laptops.
POPUP2_SLUG is a popup slug for mobiles.
Inline (HTML)

 Use the following HTML-snippet to embed the popup as inline object. For local use this method works when “Async Init” mode activated on Advanced Settings page.

POPUP_SLUG is a popup slug taken from relevant column on Popups page.
OR

POPUP1_SLUG is a popup slug for desktops/laptops.
POPUP2_SLUG is a popup slug for mobiles.
ContentStart (inline)

 Automatically insert the popup as an inline object at the beginning of posts/pages/products/etc. (ContentStart object), create ContentStart (inline) target and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
ContentEnd (inline)

 Automatically insert the popup as an inline object at the end of posts/pages/products/etc. (ContentEnd object), %screate ContentEnd (inline) target%s and make it active (drag and drop from Passive area to Active area). While creating target, you can configure how and where the popup must be displayed.
Widget

 Go to Appearance >> Widgets and drag the Green Popups widget into the desired sidebar. You will be able to select this form from the dropdown options while configuring widget.
Link locker (shortcode)

 You can lock access to certain links on your website. It means that when user clicks locked link, the popup appears. User must submit the popup form. After that link becomes available. You may have many different links locked by the same popup. Once the popup submitted all these links become available. Wrap your links (link is an <a>-tag, not URL) with shortcodes.

[lepopuplinklocker slug='POPUP_SLUG']
...
[/lepopuplinklocker]

POPUP_SLUG is a popup slug taken from relevant column on Popups page.
OR

[lepopuplinklocker slug='POPUP1_SLUG*POPUP2_SLUG']
...
[/lepopuplinklocker]

POPUP1_SLUG is a popup slug for desktops/laptops.
POPUP2_SLUG is a popup slug for mobiles.

Link locker (manual)

 The alternate way to lock links is to construct locking URL manually. Use this method if your link is located in area which does not support shortcodes.


Locking URL.
Remote use Use the popup with any non-WordPress pages of the site or with 3rd party sites. How to do it?

  1. Make sure that non-WordPress page has DOCTYPE. If not, add the following line as a first line of HTML-document.
  2. Make sure that website loads jQuery version 1.9 or higher. If not, add the following line into head section of HTML-document.
  3. Copy JS-snippet taken on Advanced Settings page in your admin panel and paste it into HTML-document. You need paste it at the end of body section (above closing </body> tag).
  4. Use any method marked by blue dot (see above).

No Comments

Sorry, the comment form is closed at this time.