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. Colors should be provided as hex values (e.g., #2563EB).
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 |
surface | Elevated surfaces (cards, modals) |
muted | Subtle backgrounds (hover states, disabled) |
Card colors
| Property | Description |
|---|
card | Card background color |
cardForeground | Text color on card backgrounds |
Popover colors
| 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 |
| Property | Description |
|---|
border | Border color |
borderPrimary | Brand-colored border |
input | Input field border color |
ring | Focus ring color |
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”) |
Example: Dark theme
const voltai = Voltai.load({
apiKey: 'your-api-key',
colors: {
foreground: '#ffffff',
mutedForeground: '#a1a1aa',
background: '#18181b',
surface: '#27272a',
muted: '#3f3f46',
border: '#3f3f46'
}
});
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.