Preventing Layout Shift (CLS)
Add min-height to the container div to reserve space before the script loads. The widget removes this style after rendering, preventing cumulative layout shift.
Step 1: Choose your height mode
Decide which height mode you'll use (slim, med, or long). The default is med.
Step 2: Add the corresponding min-height
Apply the recommended min-height value to your container div based on your chosen height mode:
| Height Mode | Recommended min-height |
|---|---|
| slim | 48px |
| med (default) | 148px |
| long | calc(55vh + 48px) |
Step 3: Test the implementation
Load your page and verify that the space is reserved before the widget appears. The widget will remove the min-height style once it finishes rendering.
For advanced height mode configuration, see the Behavior section.