How do I create a modal element with Poool Engage?

Want to display an Engage element in a pop-up window on your site? Congratulations 🥳 It's an excellent way to boost the visibility of your messages to your readers.

Before going live, there are a few considerations to take into account in order to offer the smoothest experience possible.

In this article, we particularly present a method for managing the display, then the hiding of your full-page tag.

Option 1: Apply style to parent container

ℹ This option requires no additional technical integration on your site. It's the fastest way to display an overlay element.

When you create your Engage element from the dashboard, you have the option of applying CSS styling to it, as well as to its container. We'll use this second option to generate an overlay display.

Click on the Edit element properties button
Unroll Advanced configuration
Target the parent container, starting with #p3-parent-frame {
Apply the style you wish to achieve using the CSS properties of your choice

Option 2: Building a div to host a popin element

To optimize the loading time of the element on your page, we recommend prioritizing option #1 (apply style to the parent container).

However, the second method may still be useful if you want to delve deeper into the settings applied to your CSS elements.

The first step before displaying an element on your site is to define in which container it will be located. In other words, you need to assign it an identifier (or a class) and apply style to it.

If you do not already have a suitable location on your page to host a pop-up element, you must then create one.

The following example displays a full-screen div over the content, with a shadow effect placed on it. You can integrate this tag as is on your site, or adapt it if you wish.

ℹ Note that the div is hidden by default, it will only be displayed upon the loading of the Engage element, and according to the conditions defined from the dashboard. All the info can be found in the following section.

HTML

<div id="element-poool-engage"></div>

CSS

#element-poool-engage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}

Integrate a condition for displaying and hiding the div

Once the tag is integrated on your site, it's about being able to:

Hide it when the Engage element is not loaded;
Display it only when the conditions defined in the dashboard are validated (for example, display after 5 seconds, display only once per day...);
Make it invisible when a visitor decides to close the element by clicking on the component you have defined in the dashboard (image or button).

Firstly, and as indicated in the CSS block just above, we recommend adding display: none; on the div containing the Engage element (identified in our example as #element-poool-engage).

Then, it's about being able to trigger the display of this tag when necessary, then its hiding if the user decides.

To do this, nothing simpler! Given that the Engage SDK triggers specific events throughout the life of the element, we can base ourselves on this and create the following conditions:

<script id="poool-engage" src="https://assets.poool.fr/engage.min.js" async></script>
<script>
const script = document.getElementById('poool-engage');
script.addEventListener('load', function () {
  Engage
    .init('YOUR-APP-ID')
    .on('ready', () => {
      document.querySelector('#element-poool-engage').style.display = 'block';
    })
    .on('destroy', () => {
      document.querySelector('#element-poool-engage').style.display = 'none';
    })
    .autoCreate();
});
</script>

You now know how to integrate an Engage element over your content and improve engagement, conversion, and retention of your visitors!

Any questions? Come chat with us 😊