Design in Studio
Pick a template, select real states, and tune the visible experience.
Build the widget surface before you put it on your site.
Use Studio to shape the experience people see first: click-to-call, meeting joins, AI agents, AI Agent Plus, and operator dashboards. Then carry the final CSS/JSON into Widget Builder to save production settings, domains, and keys.
Export CSS/JSON
Use manual edits or optional AI assist, then keep the final overrides.
Publish in Builder
Save domains, widget keys, advanced overrides, and embed settings.
Workflow
Open Widget Studio
Go to /widget-studio and choose the closest template: Click-to-Call, Meeting Join, AI Agent, AI Agent Plus, or Agents Dashboard.
Shape the public experience
Use the controls, preview, and inspector to tune labels, colors, spacing, icons, states, and flow behavior directly in Studio.
Preview Real States
Use Idle / Active toggles and widget flow selectors to confirm what users will actually see. For Click-to-Call, test idle, info-form, authenticating, ringing, connected, and error. For Agents Dashboard, test shell states plus Live, History, and Guide screens, and remember the runtime Configs button opens externally instead of rendering an internal panel.
Optional AI Assist
If you want AI help, use Copy AI Handoff Prompt. The prompt includes current config plus rendered preview context so an AI model can suggest CSS/JSON aligned to the selected screen.
Bring Results Back To Studio
Whether you edited manually or used AI support, keep final outputs in Studio fields: Custom CSS and Custom JSON Overrides.
Apply In Widget Builder
Go to /dashboard#widget-builder, paste Custom CSS and Custom JSON in advanced customization fields, save, and test on your target domain.
Open Widget BuilderStudio Surface Map
Templates View
Pick a starting schema. Studio-ready cards open directly into the editor, while rollout-status cards indicate items that are not yet fully editable in Studio.
Left Controls
Use widget-level controls for flow, theme, layout, labels, and state selectors before making per-element refinements.
Center Preview
This is the runtime-like canvas. Select movable and editable elements directly on the preview, then refine them from the inspector.
Right Inspector
Use the inspector for precise edits to selected elements such as text, spacing, color, icon choice, and mapped content overrides.
Header Actions
Copy AI Handoff Prompt, Custom CSS, and Custom JSON from the header. These are the main outputs you carry into the next step.
What Carries Forward
Custom CSS
Use this for visual styling changes such as spacing, type, borders, shadows, colors, and state-specific presentation. Paste it into Widget Builder advanced Custom CSS.
Custom JSON Overrides
Use this for text, icons, labels, layout flags, and content overrides that are mapped into the widget schema. Paste it into Widget Builder advanced Custom JSON.
AI Handoff Prompt
This is working context, not a publishable artifact. Use it to ask your AI model for CSS or JSON, then bring those outputs back into Studio or Builder.
Important Notes
- Manual editing in Studio is the default workflow; AI handoff is optional support only.
- Studio preview is meant to mirror runtime widget behavior as closely as possible.
- Agents Dashboard uses a Studio-native editable preview that now mirrors the runtime top bar, alert strip, session list, transcript, history, and guide composition while the published widget still mounts inside an iframe shell.
- If visual differences appear, use flow/state selectors first, then compare against a live widget render.
- Icon and text edits can be done from inspector controls or JSON overrides.
Troubleshooting
Preview looks wrong
Switch to the exact flow or state first. Many mismatches come from editing the idle screen while checking an active or connected screen.
Published widget looks different
Confirm you copied the final Custom CSS and Custom JSON into Widget Builder advanced fields, saved, and tested the same widget type and template family.
AI output is too generic
Re-copy the AI Handoff Prompt after selecting the exact screen you want changed, and ask for CSS or JSON only instead of a broad redesign description.
Next Step
Start in Widget Studio. If needed, use optional AI handoff. Then finalize in Widget Builder and publish with the correct key and domain settings.
Go To Widget Studio