Attributes
Colors
Attributes that control the widget's color scheme.
toggle-background
Background color of the circular toggle button that opens the chat. Hex color format.
| Property | Value |
|---|---|
| Type | HexColor |
| Default | '#001ccb' |
The hover color is automatically generated (darkening or lightening the base color by approximately 8%).
<tolki-chat bot="..." toggle-background="#e74c3c"></tolki-chat>
<tolki-chat bot="..." toggle-background="#27ae60"></tolki-chat>
<tolki-chat bot="..." toggle-background="#000000"></tolki-chat>
toggle-content
Color of the content (icon/text) inside the toggle button. If not specified, it is automatically generated based on the brightness of toggle-background (white for dark backgrounds, black for light backgrounds).
| Property | Value |
|---|---|
| Type | HexColor |
| Default | Auto-generated from toggle-background |
<tolki-chat bot="..." toggle-background="#e74c3c" toggle-content="#ffffff"></tolki-chat>
<tolki-chat bot="..." toggle-background="#f1c40f" toggle-content="#2c3e50"></tolki-chat>
message-background
Background color of the user's message bubbles. Hex color format.
| Property | Value |
|---|---|
| Type | HexColor |
| Default | '#001ccb' |
<tolki-chat bot="..." message-background="#27ae60"></tolki-chat>
<tolki-chat bot="..." message-background="#8e44ad"></tolki-chat>
message-content
Text color of the user's messages. If not specified, it is automatically generated based on the brightness of message-background.
| Property | Value |
|---|---|
| Type | HexColor |
| Default | Auto-generated from message-background |
<tolki-chat bot="..." message-background="#ecf0f1" message-content="#2c3e50"></tolki-chat>
<tolki-chat bot="..." message-background="#2c3e50" message-content="#1abc9c"></tolki-chat>