Match your site's theme and style the widget

The deployment's Theme sets the widget's look for everyone. On your own site you can go further: follow your site's light and dark mode, and restyle the widget with CSS.

Follow your site's light and dark mode#

If your site has its own theme switch, set the widget's theme to host. It then matches your page, and changes the moment a visitor flips your switch. host isn't one of the deployment's Theme choices (Match system, Light, Dark and Custom), so you set it in your install code:

Your deployment's brand colours stay as they are. In code you can set the mode and a colour together: theme: { mode: 'host', accent: '#0f766e' }.

The widget reads your page's mode in this order:

1. A dark or light class, or a data-theme, data-color-scheme, data-mode or data-bs-theme attribute set to dark or light, on <html>.
2. The same on <body>.
3. The page's color-scheme, when it's only dark or only light.
4. The visitor's device setting.

A visitor who picks Light or dark in the chat's ⋯ menu keeps their own choice, and it's remembered. To let your site's switch decide alone, turn off Light or dark under Header buttons in the deployment's Chat widget tab.

Change colours and sizes with CSS variables#

The widget has its own styles, so your site's CSS can't break it by accident. To change it on purpose, set its CSS variables on the widget's element: helpai-chat-host for the script tag, the NPM package and React, or web-ai-chat for the element.

helpai-chat-host,
web-ai-chat {
  --helpai-accent-user: #0f766e;
  --helpai-font: 'Inter', system-ui, sans-serif;
  --helpai-radius: 14px;
  --helpai-panel-w: 420px;
  --helpai-panel-h: 640px;
  --helpai-fab-size: 60px;
}

Values set in the deployment's Theme (with Custom: colours, corners and font) or Size and position (Width, Height, Expanded width and Expanded height) are applied on the element itself and win over your stylesheet. Leave those fields blank, or add !important to your variable.

Restyle parts with ::part()#

Five parts of the widget have names that stay the same across releases, so you can style what variables don't cover, such as shadows and borders.

helpai-chat-host::part(launcher),
web-ai-chat::part(launcher) {
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

helpai-chat-host::part(panel),
web-ai-chat::part(panel) {
  border-radius: 20px;
}

A widget set to Embed in an iframe keeps its styles inside the iframe; style it with the deployment's Theme.

Related: Customize how the widget looks and behaves (opens another site).