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 floating action button (FAB) that guests click to open the chat.
Where to find it
From the left-hand navigation menu, go to Playground, then click the Layout tab. Values are entered as CSS units (e.g. 2rem, 70%, 100vh) which give you precise, responsive control over the widget’s dimensions and position.
Layout Sections Explained
FAB Button Position
Controls where the floating action button (the button guests click to open the chat) appears on the page. All four position fields accept CSS values. You typically only need to set two of the four (e.g. Bottom and Right to anchor it to the bottom-right corner).
Top — Distance from the top of the viewport (e.g. 2rem). Leave blank if using Bottom positioning.
Bottom — Distance from the bottom of the viewport (e.g. 2rem). Default: 2rem.
Left — Distance from the left edge of the viewport. Leave blank if using Right positioning.
Right — Distance from the right edge of the viewport (e.g. 4rem). Default: 4rem.
Compact Mode (Side Panel)
Compact mode is the side-panel view that appears when a guest clicks the FAB button, without taking over the full screen. Use this to configure its size and position.
Width — The width of the side panel (e.g. 70%). Default: 70% of viewport width.
Height — The height of the side panel (e.g. 100vh). Default: 100vh (full viewport height).
Top — Distance from the top edge of the viewport. Default: 0.
Right — Distance from the right edge. Default: 0.
Bottom — Distance from the bottom edge.
Left — Distance from the left edge.
Expanded Mode (Full Chat)
Expanded mode is the full-screen or near-full-screen chat view. These settings control the dimensions and position of the widget in its fully expanded state.
Width — The width of the expanded chat panel. Default: 100% (full width).
Height — The height of the expanded chat panel. Default: 100vh (full viewport height).
Top — Distance from the top edge. Default: 0.
Right — Distance from the right edge. Default: 0.
Bottom — Distance from the bottom edge. Default: 0.
Left — Distance from the left edge.
How to Set Up Your Layout
In the left-hand navigation, go to Playground and click the Layout tab.
Under FAB Button Position, enter a Bottom value (e.g. 2rem) and a Right value (e.g. 4rem) to position the floating button in the bottom-right corner of your page. Leave Top and Left blank.
Under Compact Mode (Side Panel), set the Width (e.g. 70%) and Height (e.g. 100vh) for the side panel that opens when a guest clicks the FAB.
Set the Top and Right values to 0 to anchor the compact panel to the top-right corner of the screen, or adjust as needed for your website design.
Under Expanded Mode (Full Chat), set Width to 100% and Height to 100vh for a full-screen chat experience, or enter custom dimensions to fit your site layout.
Set Top, Right, and Bottom to 0 to make the expanded chat fill the entire viewport edge-to-edge.
Click Save to apply your layout configuration.
FAQs
Below are common questions about the Layout tab. If your question isn’t answered here, please contact Grevon support.
What CSS units can I use for the Layout fields?
You can use any standard CSS unit: rem (relative to root font size), px (pixels), % (percentage of parent), vw/vh (percentage of viewport width/height). The most common are rem for spacing (e.g. 2rem) and % or vh for sizing (e.g. 70%, 100vh).
What is the difference between Compact Mode and Expanded Mode?
Compact Mode (Side Panel) is the initial view when a guest clicks the FAB button — it shows as a side panel overlaid on your website. Expanded Mode (Full Chat) is the larger view guests can switch to for a more immersive experience, typically covering the full screen.
Can I position the FAB button on the left side of the screen?
Yes. To place the FAB on the left, enter a value in the Left field (e.g. 4rem) and leave the Right field blank. Enter a Bottom value to anchor it to the bottom-left corner.
Do these layout changes affect my website’s code?
The layout values you save here are automatically reflected in the embed code on the Embed Code tab. If you’ve already embedded the widget, the saved configuration is applied automatically via the widget script — you don’t need to update your website’s HTML.
Related Articles
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, ...How to Customise Your Chat Widget Branding
How to Customise Your Chat Widget Branding Summary The Branding tab in the Playground lets you personalise the look and feel of your Grevon AI chat widget to match your property or brand identity. You can set your bot’s name, upload logos, write a ...How to Customise Your Chat Widget Theme
Summary The Theme tab in the Playground lets you control the colour palette and typography of your Grevon AI chat widget. You can match the widget’s visual style to your website or brand guidelines by setting primary, secondary, and accent colours, ...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 ...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 ...