Desarrolladores
Personalización de widgets
Plantillas, un color de acento y CSS personalizado para los widgets de Chat en vivo y Chat con IA — se configuran desde la página de ajustes de cada widget en tu panel.
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) |
Documentos relacionados