Attributes

Appearance

Attributes that control the widget's visual style.

`theme`

Controls the widget's color theme.

Property	Value
Type	`'auto'` \| `'light'` \| `'dark'`
Default	`'auto'`

auto — Follows the operating system preference (prefers-color-scheme)
light — Always light mode
dark — Always dark mode

<tolki-chat bot="..." theme="auto"></tolki-chat>
<tolki-chat bot="..." theme="light"></tolki-chat>
<tolki-chat bot="..." theme="dark"></tolki-chat>

`rounded`

Controls the widget's border radius.

Property	Value
Type	`'none'` \| `'xs'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'`
Default	`'xl'`

Value	Pixels
`none`	0px
`xs`	5px
`sm`	10px
`md`	15px
`lg`	20px
`xl`	25px

<tolki-chat bot="..." rounded="xl"></tolki-chat>
<tolki-chat bot="..." rounded="none"></tolki-chat>
<tolki-chat bot="..." rounded="sm"></tolki-chat>

`avatar`

URL of the avatar image displayed next to the bot name in the chat header.

Property	Value
Type	`string` (URL)
Default	`null`

<tolki-chat bot="..." avatar="https://example.com/bot-avatar.png"></tolki-chat>

`backdrop-color`

Color of the overlay background that appears behind the chat window when open (on mobile or in fullscreen mode). Hex color format.

Property	Value
Type	`HexColor`
Default	`null` (uses system color)

<tolki-chat bot="..." backdrop-color="#000000"></tolki-chat>
<tolki-chat bot="..." backdrop-color="#1a1a2e"></tolki-chat>

`backdrop-opacity`

Overlay background opacity, from 0 (transparent) to 1 (opaque).

Property	Value
Type	`number` (0-1)
Default	`0.5`

<tolki-chat bot="..." backdrop-opacity="0.5"></tolki-chat>
<tolki-chat bot="..." backdrop-opacity="0.2"></tolki-chat>
<tolki-chat bot="..." backdrop-opacity="0.9"></tolki-chat>

`backdrop-blur`

Intensity of the overlay background blur effect.

Property	Value
Type	`'none'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'`
Default	`'md'`

<tolki-chat bot="..." backdrop-blur="none"></tolki-chat>
<tolki-chat bot="..." backdrop-blur="md"></tolki-chat>
<tolki-chat bot="..." backdrop-blur="xl"></tolki-chat>

Behavior

Attributes that control the widget's interactive behavior.

Colors

Attributes that control the widget's color scheme.