Embed Widget
Theming
WidgetTheme
Pass a theme object when initializing the widget to customize its appearance:
const widget = window.Ilana.init({
botId: 'your-bot-id',
token: 'your-embed-token',
theme: {
primaryColor: '#8b5cf6',
backgroundColor: '#1a1a2e',
fontFamily: 'Inter, sans-serif',
borderRadius: '16px',
},
});Theme can also be set in the admin portal and delivered automatically via /embed-config.
Properties
Brand Colors
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | — | Primary action color (buttons, links) |
primaryHover | string | — | Hover state for primary color |
textOnPrimary | string | — | Text color on primary-colored backgrounds |
Message Bubbles
| Property | Type | Default | Description |
|---|---|---|---|
userBubbleColor | string | — | Background color of user message bubbles |
assistantBubbleColor | string | — | Background color of assistant message bubbles |
assistantTextColor | string | — | Text color in assistant message bubbles |
Widget Chrome
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | — | Widget background color |
borderColor | string | — | Border color |
headerBackground | string | — | Header area background color |
Typography
| Property | Type | Default | Description |
|---|---|---|---|
fontFamily | string | — | CSS font family |
Dimensions
| Property | Type | Default | Description |
|---|---|---|---|
widgetWidth | string | "380px" | Widget width |
widgetHeight | string | "600px" | Widget height |
borderRadius | string | — | Border radius |
position | WidgetPosition | "bottom-right" | Screen position |
Branding
| Property | Type | Default | Description |
|---|---|---|---|
avatarUrl | string | — | URL for the assistant avatar image |
headerTitle | string | — | Override the header title text |
greetingMessage | string | — | Welcome message (supports {botName} variable) |
FAB Icon
| Property | Type | Default | Description |
|---|---|---|---|
fabIcon | FabIconConfig | — | Floating action button icon configuration |
interface FabIconConfig {
type: 'preset' | 'custom';
preset?: FabIconPreset; // 'chat' | 'help' | 'message' | 'support' | 'assistant'
customUrl?: string; // URL to a custom icon image
}Preset FAB Icons
| Preset | Description |
|---|---|
'chat' | Speech bubble icon |
'help' | Question mark icon |
'message' | Message icon |
'support' | Headset/support icon |
'assistant' | Robot/AI assistant icon |
Example: Fully Themed Widget
window.Ilana.init({
botId: 'your-bot-id',
token: 'your-embed-token',
theme: {
primaryColor: '#8b5cf6',
primaryHover: '#7c3aed',
textOnPrimary: '#ffffff',
userBubbleColor: '#8b5cf6',
assistantBubbleColor: '#27272a',
assistantTextColor: '#e4e4e7',
backgroundColor: '#18181b',
borderColor: '#3f3f46',
headerBackground: '#27272a',
fontFamily: '"Inter", sans-serif',
widgetWidth: '400px',
widgetHeight: '650px',
borderRadius: '16px',
headerTitle: 'Acme Support',
greetingMessage: 'Hi! How can {botName} help you today?',
fabIcon: { type: 'preset', preset: 'support' },
},
});