Widget
Custom CSS
Available on Growth and above. Your CSS is scoped to the widget’s Shadow DOM, so it can’t affect your page, and your page’s CSS still can’t affect the widget.
Where to add it
Dashboard → Widget → Advanced → Custom CSS (up to 10,000 characters). It is applied after the built-in styles, so equal-specificity rules win.
Theme variables
Prefer variables over overriding rules, because they keep light/dark mode working:
| Variable | Meaning |
|---|---|
--am-primary / --am-primary-text | Primary color and its text color |
--am-bg / --am-text | Panel background and text |
--am-user / --am-user-text | Visitor bubble |
--am-bot / --am-bot-text | Assistant bubble |
--am-radius | Corner radius |
--am-font | Font stack |
--am-ox / --am-oy / --am-ls | Launcher offsets and size |
Class reference
| Selector | Element |
|---|---|
.root | Wrapper; holds the theme CSS variables. Has .left, .open, .light/.dark/.auto modifiers |
.launcher | Launcher button (.text when it shows a label); .badge is the unread counter |
.proactive | Proactive greeting bubble |
.panel | Chat panel (full screen below 640 px) |
.head, .avatar, .title, .subtitle | Panel header |
.log | Scrollable message list |
.disclosure | AI disclosure line |
.msg.user / .msg.assistant | A message row; .bubble is the bubble itself |
.suggestions, .chip | Suggested questions |
.cards, .card, .card .name, .price, .stock | Product carousel and cards |
.btn.primary, .btn.ghost | Buttons (Add to cart, View product, contact) |
.composer, .send | Message input and send button |
.escalation | Contact form |
.foot | “Powered by” footer |
Examples
Pill-shaped launcher with a shadow in your brand colorcss
.launcher { box-shadow: 0 10px 30px rgb(157 59 90 / .35); }
.launcher.text { padding: 0 24px; font-weight: 700; }Square product cards with a border accentcss
.card { border-radius: 6px; border-color: var(--am-primary); }
.card .name { font-size: 14px; }
.price .now { color: var(--am-primary); }What is not allowed
For security, custom CSS is sanitized on the server: @import, @charset, expression(), javascript:, behaviors, and url() to anything other than inline data:image are removed.
Class names are a public interface but internal structure can evolve; target the classes listed above rather than deep descendant chains.