Back to blue

Popup Trigger

Implementation

This implementation uses the Modal to place the popup, the only responsability of the script is to trigger it based on an event or a timer.

Make sure to include the modal css into your page or project (please check if the style is not already there):

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_modal.css') }}" />

Also include the modal, the main site core, the uapi and the popup trigger scripts (please check if some of the scrips are not already there):

Modal and Popup trigger scripts needs to be defer <script type="text/javascript" class="lazy-load" data-src="{{ static("js/main_site_core.js") }}"></script> <script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_styleguide_uapi_critical.js") }}"></script> <script defer type="text/javascript" src="{{ static("js/ca_styleguide_modal.js") }}"></script> <script defer type="text/javascript" src="{{ static("js/ca_sg_popup_trigger.js") }}"></script>

This is a layout for popups that can be set per screen size (Breakpoints are based on the the Styleguide's Media Size Broadcaster):

  • mobile - from 0px to 767px
  • tablet - from 768px to 991px
  • desktop - from 992px

It supports 2 types of triggers available per screen size:

  • ["exit"] - shows the popup when the user tries to exit the screen by moving the cursor out from the top edge of the screen
  • ["timed"] - shows the popup after some time has passed.
    • trigger_after_seconds - (number) seconds that should pass before the popup is shown

* Note that the type is an array so you should be able to combine types, ie. "type": ["exit", "timed"]

* Depending on the content, we might need to rebind events when the popup is opened, at the moment we're rebinding UserDB events.

How to use it

Place the snippet below with the content needed inside.

<div class="popup-trigger"> <div class="js-popup-trigger js-is-hidden" data-popup-identifier="popupTrigger1" data-popup-expire="1" data-screens-config='{"mobile": {"type": ["timed"], "trigger_after_seconds": 10 }, "tablet": {"type": ["timed"], "trigger_after_seconds": 10 }, "desktop": {"type": ["exit"]}}' data-show="mobile tablet desktop"> <div class="pop-trg js-popup-trigger-content"> Content </div> </div> </div>

Data attributes:

  • data-popup-identifier: attribute which will set a cookie with the popup identifier name and that will indicate that the popup shows only once per section or accordingly with the expiration time set on data-popup-expire.
  • data-popup-expire: set in days the expiration time for the popup cookie.

Examples

If you need to test and show the popup more than once per day, you can delete the popupTrigger1 cookie manually using your browser's DevTools.

Timer trigger example

Go to mobile or tablet and wait for 10 seconds to see a modal showing up

Exit trigger example

Try to leave the page to see a modal showing up

Tracking

By default the module will track the open and close events using exit_intent_popup as the default element name, however, a custom element name can be specified by using the data-uapi-popup-element dataset property in the element containing the js-popup-trigger class.