Widget production guide

Design the experience first. Publish with confidence.

Use Widget Studio to shape what visitors see, test the states they will encounter, and export focused CSS or JSON. Use Widget Builder for production keys, approved domains, and the final embed.

Open Widget StudioCompare widget types
Choose your next action

Three surfaces, one production flow

Start at the stage that matches what you need today. Your design work remains portable into the secured production setup.

01

Design in Studio

Start without signing in. Pick a template, preview real states, and tune the public experience.

Open Studio
02

Secure in Builder

Sign in when you are ready to save keys, domains, CSS, JSON, and production behavior.

Open Builder
03

Embed and verify

Install one script and element, then test permissions, placement, and the complete runtime path.

View embed guide
Recommended sequence

Move from idea to a verified embed

Each step has a concrete outcome, so it is always clear when to move forward.

01

Choose a template

Open Widget Studio and start from the closest real experience: Click-to-Call, Meeting Join, AI Agent, AI Agent Plus, or Agents Dashboard.

A working base, not a blank canvas
02

Shape the public experience

Set the flow, theme, labels, layout, icons, and spacing before touching advanced overrides.

The visible interaction is defined
03

Test the states people will encounter

Move through idle, form, connecting, active, completed, and error states. Check both desktop and mobile before publishing.

No surprise states after launch
04

Refine with CSS or JSON

Use Custom CSS for presentation and Custom JSON for supported content, labels, icons, and schema-level overrides. AI handoff is optional.

Portable customization output
05

Publish in Widget Builder

Bring the final CSS and JSON into Widget Builder, choose the production key, add allowed domains, and save.

Open Widget Builder
A domain-restricted production widget
06

Validate the real journey

Load the embed on the target domain, grant the expected permissions, complete one real interaction, and confirm the fallback path.

A launch-ready visitor flow
Studio surface map

Know where each decision belongs

Start broad in Controls, validate in Preview, then make precise changes in Inspector.

Controls

Choose the flow, theme, layout, labels, and state before making element-level changes.

Live preview

Select elements in the runtime-like canvas and inspect the exact state visitors will see.

Inspector

Refine text, spacing, color, icons, and mapped overrides for the selected element.

Production handoff

Carry forward only the right output

CSS and JSON are production inputs. The AI prompt is optional working context.

Custom CSS

Presentation rules for spacing, type, borders, color, responsive behavior, and state-specific treatment.

Custom JSON

Supported content, labels, icon choices, layout flags, and schema-mapped overrides.

AI handoff prompt

Optional design context for generating a focused CSS or JSON suggestion. It is not the publishable artifact.

Before launch

Run the checks that protect the visitor experience

  • The widget type and template match the experience you previewed.
  • Idle, active, completion, error, and mobile states have been checked.
  • Production keys are restricted to the intended domains and operations.
  • The widget does not cover navigation, checkout, forms, or primary controls.
  • A visitor can understand what will happen before they click.
  • The real embedded journey has been completed once on the target domain.
Ready to design

Start with the public experience.

Preview every important state, then secure and publish the finished configuration.

Open Widget Studio