Making the widget look like your site

Everything visual lives on the widget's Design tab, and nothing is applied to your visitors until you press Publish.

Start from a screenshot

The fastest way is to upload a screenshot of your own site. We read the palette, the corner radius and the typeface off it and propose values; you review and change anything before applying, and applying only fills the fields -- it does not save. The screenshot is not stored.

Theme tokens

Each field is a CSS variable the widget reads:

• Primary and Primary hover are the launcher, the send button and the links.
• Visitor bubble and Assistant bubble are the two sides of the conversation.
• Page background, Panel background, Text, Muted text and Borders are the panel itself.
• Panel radius, Bubble radius, Font size, Launcher size, Panel width, Panel height and the two offsets are the shape and where it sits.

Leaving a colour empty means "inherit", which is usually right for the ones you have no opinion about. Every field can go back to the WelcomeAI default on its own, and there is one button that resets the lot -- you cannot get stuck with a configuration you regret.

Typeface

Pick from the Google Fonts list and it loads in the editor, in the preview and on your site, from one request. Leave it as the system font if you would rather not add a download: it matches whatever device the visitor is on and appears instantly.

The launcher icon

The WelcomeAI mark by default. Upload your own as a PNG or JPG at exactly 128 by 128 pixels, or as a square SVG. An SVG is checked carefully before it is stored -- scripts, event handlers, embedded files and external references are refused, and what we keep is a rebuilt copy containing only what is needed to draw it.

Light, dark, or follow the visitor

Theme has three settings. Auto follows the visitor's own system preference, which is the right default for a site that already does.

The live preview

The panel beside the editor is your widget on a real page at a real device width. Switch between desktop, tablet and mobile: the widget has its own breakpoints and they only fire at real widths, so judging the mobile layout by making the browser narrow does not work.

When the tokens are not enough

Pro and Business plans can write custom CSS against the widget's shadow root, using ::part() selectors for the launcher, panel, header and messages, or the widget's own class names. @import and external url() are stripped -- the widget must not fetch anything from a third party onto your visitors' pages.

If you are fighting the CSS, check the simpler thing first: a token you left empty is inheriting from somewhere, and setting it explicitly is usually the whole fix.