How to integrate an Engage element on my site?

Integrating an Engage element on your site is very simple. Here is how to do it step by step.

1. Integrate the Engage SDK across my site

The Engage SDK is the foundation that allows you to display dynamic elements on your website.

To integrate the Engage SDK:

Add the script: Insert the following script across all pages of your site, replacing <your-app-id> with your unique Poool app identifier:

<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>') 
      .autoCreate(); 
  }); 
</script>

2. Create the tag to host the element and apply an #ID or a .class

For the Engage element to be displayed in the desired location:

In the HTML of your page, integrate a div with an #id attribute or .class of your choice.

As an example, we create a div with the id "#fullscreen-widget". Here is what you need to integrate into the HTML of your page:

<div id="fullscreen-widget"></div>

To manage the style and behavior of your new div, you need to add CSS rules to it.

For example, if you opt for a full-width format and above the content of your page, you could use the following CSS rules:

#fullscreen-widget { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background-color: rgba(0, 0, 0, 0.7); 
}

Target the tag from the dashboard: The Engage SDK will use this identifier or class to know where to display the element on the page. We'll come back to this point later 👇

3. Create the element in the Poool Engage dashboard

The design

In the dashboard, go to Engage > Elements > Create an element.
Customize the appearance of your element according to the desired format: rows, colors, button, form, etc.

💡Save time and choose from the appearance models available in your dashboard and adapt the one of your choice.

Display conditions

Define the specific conditions for displaying your element. For example, you can choose to display the element only after a certain number of visits, for visitors from a certain country, or only on mobile devices.
Use the condition named "Display in a target element" and insert the #ID or the .class of the tag created on your site, in step 2.

Activate the element

Once the setup is done, activate the element so that it is visible to your visitors according to the defined conditions.

By following these steps, you should be able to effectively integrate an Engage element on your site and improve engagement, conversion, and retention of your visitors!

Any questions? Come chat with us 😊