Layout

Layout

The Layout tab controls where the chat appears on your website and how big it is — both the floating button and the chat window itself.

You'll find it under Playground → Layout in the left sidebar.

 

The Layout tab — FAB Button Position, Compact Mode, and Expanded Mode sections

How values work

Every field takes a standard CSS size value, so you can be as precise as you like:

•        rem or px for fixed distances (e.g. 1.5rem, 24px)

•        % for a portion of the screen (e.g. 45%)

•        svh for a portion of the screen height (e.g. 100svh = full height)

•        0 to pin to an edge, or leave a field blank to let it position automatically

 

There are three sections:

1. FAB Button Position

Controls the floating action button — the round button guests tap to open the chat. Set its distance from the Top, Bottom, Left, and Right edges of the screen. (Set only the edges you need — for example, Top + Right to pin it to the top-right corner.)

2. Compact Mode (Side Panel)

How the chat looks when it first opens as a side panel. Set its Width and Height, plus its Top / Right / Bottom / Left offsets. For example, a 70% width with 100svh height gives a tall panel covering the right portion of the screen.

3. Expanded Mode (Full Chat)

How the chat looks when a guest expands it to full view. Same fields — Width, Height, and the four offsets. A 100% width with 100svh height makes the chat fill the screen.

Save your changes

Click Save (top-right) to apply. The button stays disabled until you change a value.

 

Tip: Test on both desktop and mobile after saving. A 45% offset looks different on a phone than on a wide monitor — the Live Widget Preview on other tabs and your own site are the best way to confirm placement.

 

 

Important: Saving applies the new layout to your live widget immediately.

 

•        Theme — colors and fonts

•        Features — turn capabilities on or off

•        Installing the widget — add the widget to your site

    • Related Articles

    • How to Customise Your Chat Widget Layout

      Summary The Layout tab in the Playground lets you control where the chat widget appears on your website and how large it is in both Compact mode (a side panel) and Expanded mode (full chat view). You can also control the exact position of the ...

    • Playground

      The Playground is where you design, preview, and install your AI chat assistant — the widget your guests interact with on your website. Everything you change here can be previewed live before it goes out, and the install code updates automatically to ...

    • Installing the widget

      Once you've branded and configured your assistant, the Embed Code tab gives you everything you need to add it to your website — in three short steps. No coding experience required; you copy three snippets and paste them into your site's HTML. You'll ...

    • Theme

      The Theme tab controls how your chat widget looks — its colors and fonts. As with Branding, a Live Widget Preview on the right updates instantly, so you can see your palette come together before you save. You'll find it under Playground → Theme in ...