> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to integrate an Engage element on my website?

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>
```
|| The [autoCreate()](https://www.poool.dev/en/docs/engage/javascript/methods#autocreate) method creates elements matching the conditions defined in the Dashboard. To take full advantage of Poool Engage's flexibility, we recommend using it in your integration. 

||| If you want to force the display of an element manually, then [the createElement() method](https://www.poool.dev/en/docs/engage/javascript/methods#createelement) will be appropriate. Keep in mind in this case: the conditions configured on the Dashboard side will not be applied. 

* **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](https://help.poool.fr/en/article/how-to-set-up-custom-filters-in-poool-engage-i4ckag/).

```
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


![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_sddd0o.png =494x500)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_ejy8h1.png =287x500)
__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

![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_8l2bmg.png =556x500)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_1pfq5g1.png =414x400)


__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. 
![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_1yg101l.png =532x500)




* **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 `#poool-engage-banner`. 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-05-27-a-10_yd2i15.png)

# 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](https://help.poool.fr/en/category/engage-appearances-1l4wsly/)

|| To save time, feel free to browse the appearance templates available from your dashboard or consult our [appearance catalogue](https://help.poool.fr/en/article/catalog-of-appearances-engage-modules-174qt6t/). Our team can make templates available. 

### 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](https://help.poool.fr/en/article/what-are-the-different-display-conditions-of-engage-elements-qdi907/)

# 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 !