Custom chatbot styling with CSS

You can customize the appearance of the chat widget by adding your own CSS rules. Keep it simple—most users only need a few lines to match their brand.

How to add custom styling

To change the chatbot widget appearance, go to Appearance > Custom CSS in your dashboard and paste your CSS. Then click Save and refresh the preview.

The styles are injected inside the chat iframe. For safe overrides, scope your rules with the root class.echowiseai-wrapper.

Learn more about CSS (Cascading Style Sheets) basics if you are new to CSS.

💡 Tip: Try changing the theme between light/dark to make styling experiments easier.

Examples (copy & paste)

A few common tweaks. All rules are scoped to.echowiseai-wrapper so they only affect the widget.

/* Root scope */
.echowiseai-wrapper { font-family: Inter, system-ui, sans-serif; }

/* Header bar */
.echowiseai-wrapper .fixed.top-0 { background: #101828 !important; color: #fff; }

/* AI messages (assistant) */
.echowiseai-wrapper .message-prose { background: #F2F4F7 !important; color: #0f172a; }

/* User messages (send bubble color) */
.echowiseai-wrapper .bg-primary { background: #4F46E5 !important; }

/* Input area */
.echowiseai-wrapper textarea { border-radius: 12px; border-color: #CBD5E1; }

/* Send button */
.echowiseai-wrapper button[type="button"].absolute { background: #4F46E5 !important; }

💡 Your custom code will not be checked for correctness before saving. If a rule does not apply, increase specificity or append!important as shown above.