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:
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 CSSNo 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.