Widget Studio

Widget Studio

An optional styling layer for widgets you build in the dashboard. Preview click-to-call, meeting join, AI agent, AI Agent Plus, calls dashboard, and operator dashboard surfaces in every state, then carry the CSS and JSON overrides into Widget Builder. Your widget works without ever coming here.

Build a widget firstJust restyle one
No sign-in to preview Six editable templates CSS and JSON output
From preview to production
Choose templateCustomize stateCopy CSS/JSONPublish in Builder
Production widgets still use domain-locked widget keys.
The path

Widgets are built in the dashboard

Three steps, and only the first two are required. Widget Studio is a styling and preview layer — useful, never necessary.

  1. Build it in the dashboardWidget Builder is where a widget is created — pick the type, choose a key, and it hands you an embed snippet.Open Widget Builder
  2. Paste the snippetOne script tag on your page. Production widgets only run on the domains you allow.Installation steps
  3. Restyle itOptionalYou are hereWidget Studio previews every state and produces CSS/JSON overrides. Skip it and your widget still works with its default styling.
Or install the package instead of pasting the snippet

The same widgets, on npm and on GitHub. Import @mediasfu/widgets/react for the components, or @mediasfu/widgets/headless for the behaviour with no chrome at all. Step 1 does not change — the key and its domain lock come from the dashboard however the code reaches your page.

npm i @mediasfu/widgetsView on npmRead the source

Design the widget

Pick a template, adjust copy, state, layout, color, spacing, icons, and interaction details.

Preview real states

Check idle, active, ringing, connected, meeting, agent, and dashboard-style surfaces before publishing.

Carry the output forward

Copy CSS and JSON overrides into Widget Builder when you are ready to save a production widget.

Need a live example first?Try the runtime first, design here, then sign in only when you are ready to publish.
See widget demosOpen widgets guideOpen Widget Builder

Widget Studio

No-Code

Manual-first editor with optional AI assist

From idea to embed

Preview freely in Studio. Production keys, allowed domains, and the final embed are completed in Widget Builder.

  1. 1Choose
  2. 2Customize
  3. 3Copy output
  4. 4Publish
How publishing works

Select a starting point

Studio-ready widgets are editable now. Additional cards are listed with rollout status.

AI & Automation

Telephony & Calling

Video Meetings