Styling

Make the widget feel like a natural part of your website by customizing its colors and appearance. Set the title option to change the text displayed in the widget header:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  title: 'Acme Support'
});

Custom colors

Pass a colors object to override the default theme. You only need to specify the colors you want to change. Each color accepts:

hex, as #2563EB or the short form #26E (the # is optional);
rgb(), as rgb(37, 99, 235) or rgb(37 99 235);
hsl(), as hsl(221, 83%, 53%) or hsl(221 83% 53%).

Colors must be opaque, except sendButton, which also accepts transparent. The widget ignores named colors (red), other color functions such as oklch(), translucent values and option names it doesn’t recognize, and logs a warning for each in the browser console.

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  colors: {
    primary: '#FFC222',
    primaryForeground: '#181D27',
    ring: '#FFC222'
  }
});

Available color options

Background colors

Property	Description
`background`	Main page/widget background
`muted`	Subtle backgrounds (hover states, disabled)

Card colors

Property	Description
`card`	Card background color
`cardForeground`	Text color on card backgrounds

Property	Description
`popover`	Popover background color
`popoverForeground`	Text color on popover backgrounds

Text colors

Property	Description
`foreground`	Primary text color
`mutedForeground`	Secondary/muted text

Primary colors

Property	Description
`primary`	Brand/accent color (buttons, links, highlights)
`primarySoft`	Light variant of primary for soft backgrounds
`primarySoftForeground`	Text color on primary soft backgrounds
`primaryForeground`	Text color on primary backgrounds
`primaryStrong`	Dark variant of primary

Secondary colors

Property	Description
`secondary`	Secondary/neutral accent color
`secondaryForeground`	Text color on secondary backgrounds
`secondarySoft`	Light variant of secondary
`secondarySoftForeground`	Text color on secondary soft backgrounds
`secondaryStrong`	Dark variant of secondary

Accent colors

Property	Description
`accent`	Accent background color
`accentForeground`	Text color on accent backgrounds

Border & Input

Property	Description
`border`	Border color
`input`	Input field background
`ring`	Focus ring color

Send button

Property	Description
`sendButton`	Background of the message box’s send button, in every state (send, queue, stop, uploading). Defaults to `primary`. Set `transparent` to show only the icon
`sendButtonForeground`	Send button icon. Defaults to `primaryForeground`

New Chat button

Property	Description
`newChatButton`	Background of the New Chat button in the left rail and the chat history drawer. Defaults to `primary`
`newChatButtonForeground`	Its text and icon. Defaults to `primaryForeground`

Property	Description
`signInButton`	Background of every Sign in button: the header, the sign-in prompt and the guest limit dialog. Defaults to `primary`
`signInButtonForeground`	Their text and icon. Defaults to `primaryForeground`

Close button

Property	Description
`closeButton`	The header’s close (×) button. Defaults to `mutedForeground`
`closeButtonHover`	The close button on hover. Defaults to `foreground`

Chat list

Property	Description
`sidebar`	Background of the left rail, where the chat list sits. Defaults to `background`
`sidebarItemSelected`	Background of the open chat in the left rail’s chat list. Defaults to `muted`
`sidebarItemSelectedForeground`	Its text. Defaults to `foreground`

Backdrop

Property	Description
`backdrop`	Color that dims the page behind the open desktop widget. Defaults to `background`. Set its strength with `style.backdropOpacity`

Status colors

Property	Description
`error`	Error/destructive color
`errorSoft`	Light error background
`errorSoftForeground`	Text on error soft backgrounds
`errorForeground`	Text on error backgrounds
`errorStrong`	Dark variant of error
`success`	Success color
`successSoft`	Light success background
`successSoftForeground`	Text on success soft backgrounds
`successForeground`	Text on success backgrounds
`successStrong`	Dark variant of success
`warning`	Warning color
`warningSoft`	Light warning background
`warningSoftForeground`	Text on warning soft backgrounds
`warningForeground`	Text on warning backgrounds
`warningStrong`	Dark variant of warning

Other

Property	Description
`radius`	Border radius for rounded corners (e.g., “0.5rem”)

Deprecated options

These options have no effect. The widget still accepts them, so existing configurations keep loading, and logs a console warning for each one you set.

Property	Use instead
`surface`	`card` for cards and panels, `popover` for menus and dialogs
`borderPrimary`	`primary`: brand-colored borders already follow it

Answer, panel and backdrop style

Pass a style object to change how answers are framed, whether the panel casts a shadow and how strongly the page behind the widget is dimmed:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  colors: {
    backdrop: '#000000'
  },
  style: {
    answerBorder: false,
    backdropOpacity: 0.5,
    panelShadow: false
  }
});

Property	Type	Default	Description
`answerBorder`	boolean	`true`	Draw a bordered, rounded box around each assistant answer. Set `false` to show answers as plain text on the panel background. Tool steps, clarifications and approvals keep their borders
`backdropOpacity`	number	`0.45` with `backdropBlur`, otherwise `0`	How strongly `colors.backdrop` covers the page behind the open desktop widget, from `0` to `1`. Above `0`, it dims the page with or without `backdropBlur`. The widget ignores any other value and logs a console warning
`panelShadow`	boolean	`true`	Draw a drop shadow around the open desktop widget. Set `false` for a flat panel. Mobile never has one

Font

The widget uses the system font stack by default. To use your own font, load it on your page, then name it in style.fontFamily:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap"
/>

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  style: {
    fontFamily: '"Onest", sans-serif'
  }
});

Your page has to load the font because the widget renders in a shadow root, where it can’t load fonts itself. A font your page has loaded works inside the widget.

Property	Type	Default	Description
`fontFamily`	string	System font stack	A CSS `font-family` list for the widget’s text. End it with a generic family such as `sans-serif` for browsers that can’t load the font. The widget ignores a value that isn’t a valid `font-family` and logs a console warning

Example: Dark theme

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  colors: {
    background: '#18181b',
    foreground: '#fafafa',
    card: '#27272a',
    cardForeground: '#fafafa',
    popover: '#27272a',
    popoverForeground: '#fafafa',
    muted: '#3f3f46',
    mutedForeground: '#a1a1aa',
    accent: '#3f3f46',
    accentForeground: '#fafafa',
    border: '#3f3f46',
    input: '#27272a'
  }
});

Example: Brand colors

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  title: 'Your Company AI',
  colors: {
    primary: '#FFC222',
    primaryForeground: '#181D27',
    ring: '#FFC222'
  }
});

Start by customizing just primary to match your brand’s primary color. Add more overrides as needed.

Getting Started

Configuration

Guides

Widget title

Custom colors

Available color options

Background colors

Card colors

Popover colors

Text colors

Primary colors

Secondary colors

Accent colors

Border & Input

Send button

New Chat button

Close button

Chat list

Backdrop

Status colors

Other

Deprecated options

Answer, panel and backdrop style

Font

Example: Dark theme

Example: Brand colors

​Widget title

​Custom colors

​Available color options

​Background colors

​Card colors

​Popover colors

​Text colors

​Primary colors

​Secondary colors

​Accent colors

​Border & Input

​Send button

​New Chat button

​Sign in button

​Close button

​Chat list

​Backdrop

​Status colors

​Other

​Deprecated options

​Answer, panel and backdrop style

​Font

​Example: Dark theme

​Example: Brand colors

Widget title

Custom colors

Available color options

Background colors

Card colors

Popover colors

Text colors

Primary colors

Secondary colors

Accent colors

Border & Input

Send button

New Chat button

Sign in button

Close button

Chat list

Backdrop

Status colors

Other

Deprecated options

Answer, panel and backdrop style

Font

Example: Dark theme

Example: Brand colors