Design & the Widget Design Studio
Style the widget to match your brand — theme tokens, components, and the per-tenant design studio.
The Surfaces group is where you control how the assistant looks. You can adjust theme tokens, see the components it can render, and design the widget in detail.
Theme & tokens
The theme editor lets you set your role colours, font pairing, corner radius, and density, with a live preview of the widget. You can export the result as CSS or JSON.
Components
A reference of the built-in components the assistant can render — tables, cards, forms, and more — alongside the API for registering your own React components so the assistant can render them too.
Widget Design Studio
The Design Studio is where you author the widget in depth. It mounts the real widget as a live canvas, so what you see is what deploys:
- A design library — keep multiple designs and choose which is active.
- Per-size and per-mode assignment — give each chat size its own design if you like.
- An inspector for colours, typography, shape, the launcher, icons and motion, per-size overrides, and advanced CSS.
- A 'detected' design that derives light and dark schemes from your live site.