Configuration
When instantiating the VerbaChat class, you can pass several options to control its behavior and appearance.
Options reference
| Option | Type | Required | Description |
|---|---|---|---|
tagId | string | Yes | Your unique Verba tag ID identifier. |
theme | Theme | ThemeConfig | No | Display theme. Can be 'light', 'dark', or a custom object. Default is 'light'. |
targetElement | string | HTMLElement | No | Mounts the widget inline within this element. If omitted, rendering will be floating. We recommend using an element id here, for example #verba-chat. But you can also use a class name, for example .verba-chat. |
bubble | ChatBubbleConfig | No | Overrides for the floating button. Ignored in inline mode. |
assistantAvatar | string | No | Custom image URL for the assistant's avatar inside the chat. |
token | string | No | Authentication token for verified sessions. Required for secured setups. |
withThreadList | boolean | No | When true, enables a sidebar showing the user's past conversation threads. Defaults to false. |
Full floating configuration
javascript
import { VerbaChat } from '@verba-ai/chat-sdk'
const chat = new VerbaChat({
tagId: 'YOUR_TAG_ID',
theme: 'dark',
assistantAvatar: 'https://cdn.example.com/mascot.png',
withThreadList: true,
token: 'jwt-auth-token-str',
bubble: {
position: 'bottom-left',
color: '#6366f1',
size: 60,
},
})
chat.init()
ThemeConfig
The ThemeConfig interface allows for advanced customisation of the visual style of the chat widget. You can pass it directly to the theme option.
typescript
export interface ThemeConfig {
primaryColor?: string
textColor?: string
backgroundColor?: string
fontFamily?: string
}
Properties
| Option | Type | Default | Description |
|---|---|---|---|
primaryColor | string | - | The primary brand color used for accents, buttons, and active states. |
textColor | string | - | Text color used inside the widget interface. |
backgroundColor | string | - | Global background color of the widget. |
fontFamily | string | - | Custom font family for all text elements. |
Example
javascript
const chat = new VerbaChat({
tagId: 'YOUR_TAG_ID',
theme: {
primaryColor: '#6366f1',
textColor: '#1f2937',
backgroundColor: '#ffffff',
fontFamily: 'Inter, sans-serif',
},
})
ChatBubbleConfig
The ChatBubbleConfig interface allows you to configure and style the floating launcher button. It has no effect when targetElement is defined (inline mode).
typescript
export interface ChatBubbleConfig {
position?: 'bottom-right' | 'bottom-left'
color?: string
size?: number
icon?: string
closeIconColor?: string
chatIconStrokeColor?: string
shadowColor?: string
}
Properties
| Option | Type | Default | Description |
|---|---|---|---|
position | 'bottom-right' | 'bottom-left' | 'bottom-right' | Corner position of the floating bubble. |
color | string | '#ffffff' | Background color of the bubble (supports hex, rgb, or gradients). |
size | number | 56 | Size (width and height) of the bubble in pixels. |
icon | string | - | SVG string for a custom open (chat) icon. If omitted, the default chat icon is used. |
closeIconColor | string | '#ffffff' | Color of the close (X) icon. |
chatIconStrokeColor | string | '#ffffff' | Stroke color of the default chat icon. |
shadowColor | string | - | Custom CSS color (rgba or hex) for the bubble's box-shadow. Overrides default shadow. |
Example
javascript
const chat = new VerbaChat({
tagId: 'YOUR_TAG_ID',
bubble: {
position: 'bottom-right',
color: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)',
size: 64,
chatIconStrokeColor: '#ffffff',
closeIconColor: '#f3f4f6',
shadowColor: 'rgba(99, 102, 241, 0.4)',
},
})