Quick Start

<callab-chat agent-id="your-agent-id"></callab-chat>
<script src="https://unpkg.com/@callab-ai/widget" async></script>

Theming

Dark mode works out of the box. For light mode or custom colors:

<callab-chat
  agent-id="demo"
  dark-mode="false"
  primary-color="#18181b"
  background-color="#ffffff"
  foreground-color="#09090b"
  muted-color="#f4f4f5"
  border-color="#d4d4d8"
></callab-chat>

Attributes

All optional except agent-id.

Layout

| Attribute | Type | Default | |---|---|---| | agent-id | string | required | | placement | bottom-right | bottom-left | top-right | top-left | bottom-right | | width / height | string | 540px / 780px | | dismissible | boolean | true | | default-expanded | boolean | false |

Avatar

| Attribute | Type | Default | |---|---|---| | avatar-type | orb | image | orb | | avatar-image-url | string | — | | orb-hue | number (0-1200) | 990 | | collapsed-text | string | Chat with us | | show-avatar-when-collapsed | boolean | true |

Colors

| Attribute | Controls | |---|---| | dark-mode | false for light theme | | primary-color | Buttons, links, accents | | background-color | Main background | | foreground-color | Primary text | | muted-color | Muted backgrounds | | border-color | Borders, dividers | | accent-color | Hover states | | user-bubble-color | User message bubbles | | border-radius | Corner roundness |

Text Labels

| Attribute | Default | |---|---| | heading-text | What can I help with? | | subheading-text | — | | input-placeholder | Ask anything... | | approve-text / deny-text | Approve / Deny | | send-button-text / stop-button-text | Send / Stop | | new-chat-text | New chat | | thinking-text / error-text | Thinking... / Something went wrong |

Features

| Attribute | Default | |---|---| | show-tool-calls | true | | show-reasoning | true | | enable-attachments | true | | enable-voice | true | | enable-suggestions | true | | suggestions | JSON array of strings |

License

MIT