Widget Studio

Make your widgets look like your product

Pick a widget, change its wording, colors and layout, and check how it looks in every state, from idle to connected. Copy the result into Widget Builder when it looks right.

Pick a widgetBuild a new widget
No sign-in to preview Six widgets to start from Copy as CSS and JSON
IdleCall us
RingingCalling…
Connected00:42
Example: one widget, three states

Pick a widget to restyle

  1. 1Choose
  2. 2Customize
  3. 3Copy output
  4. 4Publish
Open Builder

AI & Automation

Telephony & Calling

Video Meetings

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