Chatbot Custom CSS Styling
Pixel-perfect control over your chat widget design
Vatdi provides full custom CSS support that lets you override any default style in the chat widget. Match your design system, implement complex layouts, animate transitions, and achieve pixel-perfect branding that goes beyond what visual editors offer, all without touching the core widget code.
How It Works
Open the CSS Editor
Go to your chatbot settings > Appearance > Custom CSS. The editor supports syntax highlighting and live preview.
Write Your Custom Styles
Use the CSS selector reference to target specific widget elements. Preview changes in real time on desktop and mobile.
Save and Deploy
Save your CSS and it applies immediately to all embedded instances. No script changes or redeployment needed.
CSS Injection from Dashboard
Add your custom CSS directly in the Vatdi dashboard under Appearance > Custom CSS. Styles are applied at runtime and scoped to the chat widget using shadow DOM isolation. Your CSS will not leak into the host page, and host page styles will not break the widget.
Comprehensive Selector Reference
Vatdi provides a complete CSS selector reference documenting every targetable element: header, message bubbles, input field, buttons, avatar, timestamps, typing indicator, and more. Each selector is stable across versions to prevent breakage on updates.
Responsive and Dark Mode Support
Write media queries and CSS custom properties that adapt the widget to different screen sizes and color schemes. Vatdi exposes CSS variables for all key colors, making it easy to implement dark mode with a few variable overrides.
Frequently Asked Questions
No. Vatdi maintains stable CSS selectors across versions. Any selector changes are documented in release notes with migration guides.
Minimal impact. Custom CSS is injected inline and processed by the browser alongside default styles. Keep your CSS concise for best results.
Yes. Vatdi exposes CSS custom properties for all key design tokens. Override them to change colors, spacing, and typography globally.
Yes. The widget uses shadow DOM for style isolation. Your custom CSS is injected inside the shadow root so it can target widget elements directly.
Yes. Use @import or @font-face in your custom CSS to load external fonts. They will be applied within the widget shadow DOM.
Style Your Chatbot with Custom CSS
Full CSS control over every element in the chat widget.