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: see the components it can render, and design the widget in detail in the Widget Design Studio.
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.
Create and activate a design, step by step
The Design Studio mounts the real widget as a live canvas, so what you see is what deploys:
- Open the Design StudioGo to the Surfaces group and open the Widget Design Studio. It loads the live widget beside a design library.
- Create a profileClick New profile and name it — or duplicate the built-in 'detected' design, which derives light and dark schemes from your live site, and edit from there.
- Tune it in the inspectorOpen the profile to edit. Use the inspector to adjust colours, typography, shape, the launcher, icons, and motion — the live canvas updates as you go, and your changes save as you make them.
- Assign it to sizes and modesIn the Sizes & modes panel, choose which chat sizes and modes use this design — you can give each size its own if you like.
- Make it the one in useSaving updates the profile’s stored look, but your live widget only changes when you choose Use this design to make it the active one. Promote to production when you’re happy with it.