Theming

The Verba AI widget provides two primary visual modes, plus a powerful configuration syntax to pass granular colors directly through the SDK.

Built-in themes

Set the theme option to 'light' or 'dark', and the widget's internal UI adjusts automatically:

javascript

import { VerbaChat } from '@verba-ai/chat-sdk'

const chat = new VerbaChat({
    tagId: 'YOUR_TAG_ID',
    theme: 'dark',
})

Advanced Customization

If simple light/dark themes don't fit, you can pass an object conforming to ThemeConfig to explicitly override the inner colors.

javascript

import { VerbaChat } from '@verba-ai/chat-sdk'

const chat = new VerbaChat({
    tagId: 'YOUR_TAG_ID',
    theme: {
        primaryColor: '#6366f1',
        textColor: '#111827',
        backgroundColor: '#ffffff',
        fontFamily: "'Inter', sans-serif",
    },
})

The Floating Bubble

When running in floating mode (the default), you can restyle the trigger button using the bubble object:

javascript

import { VerbaChat } from '@verba-ai/chat-sdk'

const chat = new VerbaChat({
    tagId: 'YOUR_TAG_ID',
    bubble: {
        position: 'bottom-right', // corner placement
        color: 'linear-gradient(135deg, #818cf8 0%, #a78bfa 100%)', // background
        size: 64, // button width and height in px
        shadowColor: 'rgba(99, 102, 241, 0.4)', // border shadow behind the button
        icon: '<uri-link-to-svg>', // uri link to svg icon to replace default chat icon
        closeIconColor: '#ffffff', // color of the close icon
        chatIconStrokeColor: '#ffffff', // color of the chat icon
    },
})