# Making the widget look like your site

> Colours, corners, typeface, the launcher icon, and what to do when none of it is enough.

Source: https://welcomeai.dev/docs/widget-customization
Category: Widgets
Updated: 2026-09-06

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