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

Integrating the Engage SDK across your entire 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 on all pages of your site, replacing <your-app-id> with your 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>

• Add your segmentation

If you want to activate specific segmentation based on your own characteristics, you need to pass custom filters in the autoCreate() method. More info on this in our article on custom filters.`

engage.autoCreate({filters:['value1', 'value2','value3']}):

Configuring the display of different formats

Once the script is integrated on your page, the Engage element activated on the Dashboard side will be displayed by default as an overlay.

For the Engage element to display in the desired location, you have several options depending on the desired final result :

Modal Format

To display the modal format, you can define its style via the parent container's CSS.

Example CSS to use for positioning and page effect :

#p3-parent-frame {
position: fixed;
margin: auto;
bottom: 0;
left: 0;
right: 0;
top:0;
overflow: hidden;
justify-content: center;
z-index: 1000;
}

Banner Format

To display it in banner format, you can define its location via the parent CSS in the Dashboard :

__Example CSS here to position it at the bottom of the page : __

#p3-parent-frame {
position: fixed;
margin: auto;
bottom: 0;
z-index: 80;
}

Tag targeting

You also have the option to choose the exact location of your element on the page via a tag present on your page.

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

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

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

• Use the condition named "Display in a target element" and insert the #ID or .class of the tag created on your site, in step 2.

Configuring the element in the Poool Engage Dashboard

Once the integration is complete, configurations can be made in the Dashboard.

Appearance

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

More info in our dedicated section 👉 Engage - Appearances

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 specific country, or only on mobile devices.

More info in our dedicated section 👉 Engage - Display conditions

Activating the element

• Once the configuration 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 the engagement, conversion, and retention of your visitors !

A question, an issue ? Contact us via chat !

Updated on: 29/05/2026