Embedding the Chat Widget / Preventing Layout Shift (CLS)

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.