Theme

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 the left sidebar.

 

The Theme tab — color palette and typography on the left, live preview on the right

Choose your colors

There are five colors you can set. Each has a color swatch (click it to pick visually) and a hex field (type an exact value like #29BBAF).

 

Color

What it affects

Primary

Your main brand color — used for prominent elements like buttons and headers.

Secondary

A supporting color that complements the primary.

Accent

Highlights — links, the send button, and active states.

Text color

The color of message text in the chat.

Background color

The background of the chat window.

 

To set a color:

1.    Click the swatch and pick a color, or type a hex code (e.g. #0B0B0B) into the field beside it.

2.    Watch the Live Widget Preview update.

 

 

Tip: Use the same hex values as your website's brand palette for a seamless look. Make sure your Text color has strong contrast against your Background color so messages stay easy to read.

 

Choose your fonts

Below the colors, set your typography:

•        Font family — pick a typeface from the dropdown (click Select font).

•        Base Font size — set the overall text size (click Select size).

 

Save or reset

•        Save Theme (top-right) publishes your palette and fonts to the live widget. It stays disabled until you make a change.

•        Reset To Default restores the original Grevon theme — handy if you want to start over.

 

 

Important: Saving applies your theme to the live widget on your website immediately.

 

•        Branding — name, logo, greeting, and starter suggestions

•        Layout — where the widget sits and how big it is

•        Installing the widget — add the widget to your site

    • Related Articles

    • 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, ...

    • 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 ...

    • Features

      The Features tab lets you switch individual chat capabilities on or off. Turn on only what fits your property — the widget adapts to your choices. You'll find it under Playground → Features in the left sidebar. The Features tab — a toggle for each ...

    • 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, ...