The Widget Ecosystem

2026-03-02 · Guide

MediaSFU offers a family of embeddable widgets that bring real-time voice, video, and AI capabilities directly into any website — no SDK integration, no backend changes, and no app installs for your users.

💡 Quick start Every widget is a self-contained web component. Drop a single <script> tag and one HTML element onto your page, and it just works. The same widgets power our own demos page.

Available Widget Types

1. Click-to-Call Button Public

A floating or inline button that lets website visitors call your team instantly. Supports SIP routing, hold music, call queues, and warm transfers.

Configure colors, placement, and behavior from the dashboard — no code changes needed after initial embed.

2. AI Agent (Voice / Multimodal) Public

An AI-powered voice or video agent that answers calls, chats with visitors, books appointments, and routes complex issues to humans.

Uses your choice of LLM provider (OpenAI, Anthropic, Google, etc.) with configurable prompts and personas.

3. Meeting Portal Public

A full meeting join experience embedded inline. Visitors enter a room code, preview their camera, and join — all without leaving your site.

Supports prebuilt rooms, scheduled meetings, and instant ad-hoc sessions.

4. Web Agent Public

A conversational AI widget that operates in multimodal mode — voice and vision simultaneously. Perfect for support desks, onboarding flows, and interactive product tours.

5. Calls Dashboard Internal

A full cloud phone system widget for managing inbound and outbound calls. Displays active calls, call history, agent status, and real-time analytics.

Designed for CRM and helpdesk integration.

6. Agents Dashboard Internal

Real-time management of all active AI Agent Plus sessions. Monitor conversations, barge in when needed, view transcripts, and manage agent configurations — all from a single embedded panel.

Every Widget Needs a Disposable Key

This is a deliberate design choice. Every widget instance requires a Widget Key — a unique, disposable token generated from your MediaSFU dashboard.

Why disposable? Because widget keys are designed to be:

🔒 Domain-locked Each key can be restricted to specific domains (e.g., yoursite.com) so it won't work if someone copies your embed code to another site. ♻️ Revocable If a key is compromised or no longer needed, revoke it instantly and generate a new one. Your existing widgets keep working with their own keys. 📊 Auditable Every key tracks usage (calls initiated, sessions created, minutes consumed) independently, giving you per-widget analytics. 🎯 Scoped A key is tied to a specific widget type and configuration. Changing the widget type means generating a new key with the right scope.

Generating a key takes seconds — go to your dashboard, select the widget type, configure it, and copy the key. That's it.

From Localhost to Production: The Widget Lifecycle

Here's the typical workflow when building with MediaSFU widgets:

Step 1: Create & Test on Localhost

When you first create a widget key, it works on localhost by default. This means you can develop and test locally without any domain restrictions:

<script src="https://cdn.mediasfu.com/widget.js" async></script>
<mediasfu-call-button
  widget-key="wk_your_key_here"
  button-text="Call Sales"
  primary-color="#10B981"
  theme="dark"
  position="bottom-right">
</mediasfu-call-button>

Open your local dev server, and the widget loads and functions exactly as it will in production. Test call flows, AI agent responses, meeting joins — everything works locally.

Step 2: Restrict to Your Domain

Once you're happy with the behavior, head to your dashboard and add your production domain(s) to the key's allowed origins:

yourdomain.com
app.yourdomain.com
staging.yourdomain.com

ℹ️ Silent failure by design After restriction, the widget will only initialize on those domains. Attempts to use the key from unauthorized origins will fail silently — no error messages that could help attackers.

Step 3: Deploy

Push your embed code to production. The widget loads from MediaSFU's global CDN (cdn.mediasfu.com), so it's fast everywhere. No self-hosting required, no CORS issues, no build steps.

Step 4: Monitor & Iterate

Your dashboard shows real-time usage per widget key: calls, minutes, sessions, AI agent interactions. If you need to change colors, button text, or agent prompts, many properties can be updated from the dashboard without touching your code.

Public-Facing vs. Non-Public Widgets

Not all widgets are meant for anonymous website visitors:

Category	Widgets	Audience	Notes
Public	Click-to-Call, AI Agent, Meeting Portal, Web Agent	Anyone on your site	Rate-limited & abuse-protected by default
Internal	Calls Dashboard, Agents Dashboard	Authenticated staff	Embed behind your auth layer

Non-public widgets are typically embedded in:

Internal admin panels
CRM dashboards (Salesforce, HubSpot, custom)
Helpdesk tools
Operations monitoring screens

You control access by embedding them behind your own authentication layer. The widget key ensures they only render on your authorized internal domains.

Platform Availability

MediaSFU widgets work everywhere the web works:

Platform	Examples
Any website	Static HTML, WordPress, Shopify, Wix, Squarespace
JS frameworks	React, Vue, Angular, Svelte — web components are framework-agnostic
Mobile webviews	React Native, Flutter, native iOS/Android
Desktop apps	Electron, Tauri — same embed code

💡 Native SDKs also available

The MediaSFU platform provides native SDKs for React, React Native, Flutter, Angular, Vue, Expo, and Kotlin — but widgets are the fastest path from zero to a working integration.

Getting Started

Sign up at mediasfu.com free tier
Go to Widgets in your dashboard
Create a widget — pick a type, configure appearance and behavior
Copy the embed code — paste into your site
Test on localhost, then restrict to your domain
Go live — you're done

✅ No friction No meetings to schedule, no sales calls required, no minimum commitments. Create a widget, embed it, and you're live in under 5 minutes.