Attributes
Overview
Complete reference of all HTML attributes available for the tolki-chat component.
The <tolki-chat> component accepts HTML attributes to control its appearance and behavior. Attributes use kebab-case in HTML (e.g. default-open) which maps to camelCase internally (e.g. defaultOpen).
Attribute Categories
| Category | Attributes |
|---|---|
| Required | bot |
| Layout | position, window-size, toggle-size, margin, window-max-height |
| Behavior | default-open, expandable, unclosable, show-rating, show-sources, show-queries |
| Appearance | theme, rounded, avatar, backdrop-color, backdrop-opacity, backdrop-blur |
| Colors | toggle-background, toggle-content, message-background, message-content |
| Content | name, message-placeholder, toggle-placeholder, welcome-message, suggestions, toasts |
| i18n | lang, locales |
| PRO | icon, unbranded |
| Deprecated | inline |
bot
UUID identifier of the bot. Required for component initialization. When set, the component connects to the Tolki backend to retrieve the bot configuration.
| Property | Value |
|---|---|
| Type | string (UUID) |
| Required | Yes |
| Default | — |
<tolki-chat bot="YOUR-BOT-UUID"></tolki-chat>
Priority System
Attributes follow a three-level priority system:
- HTML Attributes (highest) — Values set directly in the tag
- Backend — Values from the Tolki API based on bot configuration
- Defaults (lowest) — Built-in fallback values
This means an attribute set via HTML always overrides the value from the backend, allowing full client-side customization.
Quick Example
<tolki-chat
bot="YOUR-BOT-UUID"
position="right"
window-size="md"
toggle-size="lg"
margin="20,30"
window-max-height="90vh"
default-open="false"
expandable
theme="auto"
rounded="lg"
toggle-background="#e74c3c"
message-background="#e74c3c"
backdrop-blur="lg"
backdrop-opacity="0.6"
avatar="https://example.com/avatar.png"
name="en:Assistant|it:Assistente"
message-placeholder="en:Ask me anything...|it:Chiedimi qualsiasi cosa..."
welcome-message="en:Hello! How can I help you?|it:Ciao! Come posso aiutarti?"
suggestions="en:Pricing|it:Prezzi,en:How it works|it:Come funziona"
lang="it"
locales="en,it"
></tolki-chat>