30 themes that actually look good
Every theme is crafted pixel by pixel. Click any theme to launch a live demo — try it before you ship it.
Your site's CSS stays exactly as it is
Every theme here runs inside a Shadow DOM. That means the widget is completely cut off from your site's styles. No inheritance, no conflicts, no "why did my navbar turn blue" moments.
Shadow DOM is a browser-native feature that creates an isolated subtree. CSS from your page can't leak in. CSS from the widget can't leak out. They exist in separate worlds.
Each theme is self-contained. All fonts, colors, and layout rules ship with the theme itself. Your Bootstrap setup, your Tailwind config, your legacy jQuery UI — none of it matters.
Swapping themes takes one config change. Update the data-theme attribute on your script tag and you're done. No code changes, no redeployment, no design debt.
Shadow DOM isolation
The widget lives in its own DOM shadow root. Your stylesheets don't touch it. Its styles don't touch yours. It's not a workaround — it's how browsers are supposed to do this.
Zero-conflict design
No z-index wars. No font-family inheritance. No reset.css fights. Each theme brings everything it needs. Works on WordPress, Shopify, Webflow, custom React apps — doesn't matter.
Instant switching
Change the theme, reload. That's it. No rebuild process, no cache to clear on your end. The widget fetches its theme config at runtime so switching is genuinely instant.
Ready to pick your look?
All 30 themes are included free. Set up your widget in under 2 minutes.
Try it freeTheme questions
Can I customize theme colors?
Yes. Every theme has a default palette but you can override the accent color from your widget settings. Pro plan also supports custom CSS via CSS custom properties exposed by the theme.
Do themes affect page speed?
No. The whole widget including theme styles is under 10KB gzipped and loads asynchronously. It doesn't block your page render or touch your Core Web Vitals.
Are themes mobile responsive?
All 20 themes adapt to mobile. On small screens the widget opens as a full-screen overlay so visitors get a proper chat experience instead of a cramped little box.
How do I switch themes?
Change the data-theme attribute on your script tag. That's literally the whole process. Save, next page load, done.
Can I preview a theme before going live?
Yes — click any card on this page. It launches the actual live widget with that theme so you can try it for real, not just look at a static screenshot.
Is custom CSS supported?
Pro plan supports custom CSS targeting. Because the widget uses Shadow DOM, you use CSS custom properties that the theme exposes. You get full control without touching widget internals.