> ## 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).

# Engage & CLS — Avoiding Layout Shifts (Cumulative Layout Shift)

The **CLS (Cumulative Layout Shift)** metric measures unexpected layout shifts perceived by the user while the page loads.  
This article aims to explain:

* which Engage formats may generate CLS
* why this happens
* how to correct it directly in the Poool Engage Dashboard
* how to validate the integration on your site
* recommended best practices

## Why can Engage cause CLS?

Engage is displayed inside an iframe, loaded asynchronously. Two main scenarios may generate a visual shift:

### Case 1 — Inline display inside a div without a reserved height

### The Engage element appears directly in the content flow, but the container has no defined height (same for width, though this is generally less problematic).

➡️ When the iframe loads, the content “pushes” the rest of the page downward, creating unwanted CLS.

Examples of affected formats:

* **Inline widget / inside an article between paragraphs**
* **Widgets inserted into a dedicated zone outside content (e.g., promotional block in a sidebar)**

💡 How to fix?

```
<div id="engage-zone" style="min-height: 300px;"></div>
```

Note: The value is indicative and should be adjusted based on the actual height of your Engage element.

---

### Case 2 — Full-screen modal without a fixed height

Full-page modals require a forced height inside the iframe to prevent layout recalculation at the moment of display.

➡️ Without a proper configuration in the dashboard (or directly on the site container hosting the iframe) using `height: 100vh`, the iframe dynamically resizes according to the components loaded from the dashboard.

This phenomenon is usually not visible to users, but **Core Web Vitals** measurement tools may report a non-negligible CLS score.

**💡** How to fix?  
Reserve the necessary height from:  
​_Modify element properties_ > _Advanced configuration_ > _Parent container CSS_ > _`#p3-parent-frame {min-height :100vh;}`_

Example: CLS before and after the fix on a modal overlay:

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/d/f/9ddfbee3516e1000/932459c9-4683-4c2e-9add-bb5a97_lrzx6j.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1871775687/6b79034886479d5cdb3acb04e233/image.png?expires=1773333000&signature=0e1c60c74c19cc37d3b236962dcfc3f065f02b590cfa272b36f8100b0878f86b&req=dSggF855mIdXXvMW1HO4zWeUZQXuoVG8QGqxYQzjx1tZr2Uzldz09%2F9Fwq0j%0AfuFActiR%2FKp2UpRc%2BBk%3D%0A)

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/e/9/5/9e95703dda5af800/e0844e80-d122-4a24-8813-618536_1a717hh.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1871665501/2c5c0d2575ec39424273e206704b/cls-avant.png?expires=1773333000&signature=dc32995376ec8e25dea96be0ed293d652faee9fe3d11914aa2e6119cb8f31117&req=dSggF894mIRfWPMW1HO4zWc3q5eAmXRRcWBy92HR4YMvQdYK%2F5vUjdDpDZ1a%0AqmRM39%2F2AtS62xAvZ6Y%3D%0A)

After implementing the fix, the observed CLS is much lower :

[![](https://storage.crisp.chat/users/helpdesk/website/-/c/a/4/a/ca4a0428fbb6f000/40182e0c-0dce-4186-80fd-25f551_b812la.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1871666397/ec91f86f3aa4483fc6ac859bf2ca/cls-apres.png?expires=1773333000&signature=0935aa2a088f7d987fde1b2decc530b92f307a4e5c0479202d5640468cc8fc01&req=dSggF894m4JWXvMW1HO4zcXstuqeDlNs12mzU6dTW3yFQq5NpGt1l6Z%2F6juZ%0Apebxz%2B4YHw7ohQj8AI0%3D%0A)

## Quick checklist to avoid CLS

### For inline formats

* A **reserved height** is defined
* Test rendering on mobile (where CLS tends to be more visible)

### For full-page modals

* `height: 100vh;` added to the parent CSS
* No CSS animations that might modify iframe size
* Test on low-end devices and slower connections

### On the publisher’s site

* Ensure the container is located in a **stable part of the DOM**
* Ensure the container is **not dependent on lazy-loading** or similar techniques

## How to test whether an Engage element generates CLS?

Locally via Chrome DevTools:

1. Open your browser’s developer tools
2. Go to the **Performance** tab
3. Reload the page
4. Inspect the CLS section and the “shifts” areas in the HTML

Using real-world user data - several tools are available. When eligible, Google provides the **Chrome User Experience Report (CrUX)**, offering real user CLS measurements (sample example shown in the PDF).

[![](https://storage.crisp.chat/users/helpdesk/website/-/4/5/5/9/45592800f91cac00/0b6bc62c-37e6-4ce8-b1ac-6605d1_1fooonf.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1871674984/06c80c9873985ea70371953beb3e/image.png?expires=1773333000&signature=780ef4fe3f3e214c959e75dfd18662a597745ded8ab20a359bc3268e1c9a8a73&req=dSggF895mYhXXfMW1HO4zT%2FxOAKL927zRyujYn6S8p0YylxA7%2FlnlKe7cY8A%0AN0xnQRUJSn3V%2FwQXQqg%3D%0A)

With these best practices applied, **Poool Engage introduces no perceptible CLS** and remains fully compliant with **Core Web Vitals** recommendations.