Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Customize the widget’s appearance to match your brand
title option to change the text displayed in the widget header:
const voltai = Voltai.load({
apiKey: 'your-api-key',
title: 'Acme Support'
});
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'
}
});
| Property | Description |
|---|---|
background | Main page/widget background |
surface | Elevated surfaces (cards, modals) |
muted | Subtle backgrounds (hover states, disabled) |
| Property | Description |
|---|---|
card | Card background color |
cardForeground | Text color on card backgrounds |
| Property | Description |
|---|---|
popover | Popover background color |
popoverForeground | Text color on popover backgrounds |
| Property | Description |
|---|---|
foreground | Primary text color |
mutedForeground | Secondary/muted text |
| 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 |
| 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 |
| 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 |
| 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 |
| Property | Description |
|---|---|
radius | Border radius for rounded corners (e.g., “0.5rem”) |
const voltai = Voltai.load({
apiKey: 'your-api-key',
colors: {
foreground: '#ffffff',
mutedForeground: '#a1a1aa',
background: '#18181b',
surface: '#27272a',
muted: '#3f3f46',
border: '#3f3f46'
}
});
const voltai = Voltai.load({
apiKey: 'your-api-key',
title: 'Your Company AI',
colors: {
primary: '#FFC222',
primaryForeground: '#181D27',
ring: '#FFC222'
}
});
primary to match your brand’s primary color. Add more overrides as needed.