Articles on: Poool Engage - Technical questions

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.

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:

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

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:

Open your browser’s developer tools
Go to the Performance tab
Reload the page
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).

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

Updated on: 12/03/2026

Was this article helpful?

Thank you!