Developers
Widget Customization
Templates, an accent color, and custom CSS for the Live Chat and AI Chat widgets — set from each widget's settings page in your dashboard.
Templates
Both the Live Chat and AI Chat widgets ship with three built-in templates, set from each widget's settings page in your dashboard. Templates only change shape, size, and shadow — color always comes from the accent color setting below.
| Template | Look |
|---|---|
| Classic (default) | A circular launcher button and a softly rounded, heavily shadowed panel. |
| Minimal | A smaller, tighter-radius launcher and a flatter panel with a subtler shadow and border. |
| Bold | A larger launcher and a more rounded panel with a deeper shadow and an accent-colored top border. |
Accent color
Pick any hex color and it replaces the widget's launcher background, active tab underline, visitor message bubbles, and buttons. Leave it unset to use the default (orange for Live Chat, purple for AI Chat).
Custom CSS
For anything templates and color can't cover, paste raw CSS into the Custom CSS field. It's injected as its own stylesheet after the widget's built-in one, so your rules win on equal specificity — add !important only if you need to override something more specific.
Your CSS is inserted as plain text, never evaluated as HTML or JavaScript, so there's no way for it to do anything beyond styling the widget on your own page.
/* Live Chat: use your site's font and a squarer panel */
.embedio-chat-panel {
font-family: "Inter", sans-serif;
border-radius: 6px;
}
/* AI Chat: make the launcher bigger */
.embedio-aichat-bubble {
width: 72px;
height: 72px;
}Live Chat class reference
| Class | Element |
|---|---|
| .embedio-chat-bubble | Floating launcher button |
| .embedio-chat-panel | The chat window |
| .embedio-chat-header | Panel header bar |
| .embedio-chat-tabs / .embedio-chat-tab | FAQ / Chat tab bar |
| .embedio-chat-body | Scrollable message/FAQ area |
| .embedio-chat-msg.visitor / .embedio-chat-msg.assistant | Message bubbles |
| .embedio-chat-composer | Bottom input row |
| .embedio-chat-btn | Buttons (start chat, send) |
AI Chat class reference
| Class | Element |
|---|---|
| .embedio-aichat-bubble | Floating launcher button |
| .embedio-aichat-panel | The chat window |
| .embedio-aichat-header | Panel header bar |
| .embedio-aichat-body | Scrollable message area |
| .embedio-aichat-msg.visitor / .embedio-aichat-msg.ai / .embedio-aichat-msg.assistant | Message bubbles |
| .embedio-aichat-handoff | The "talk to a human?" prompt |
| .embedio-aichat-composer | Bottom input row |
| .embedio-aichat-btn | Buttons (start chat, send, handoff) |
Related documents