Attributes
Overview
Complete reference of all HTML attributes available for the tolki-chat component.
The <tolki-chat> component accepts 27 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 |
| Behavior | default-open, expandable, unclosable |
| Appearance | dark, 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 |
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"
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>