Generic HTML/CDN Embed — MediaSFU Widgets

Quick Start

Works with any static HTML site, including Netlify, Vercel, GitHub Pages, custom servers, and static site generators (Jekyll, Hugo, Eleventy, etc.).

Get Your Widget Key

Add the Script to Your HTML

Add this to the <head> or end of <body>:

<script src="https://cdn.mediasfu.com/widget.js"></script>

Add a Widget Element

Place this anywhere in your HTML where you want the widget to appear:

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="click-to-call">
</mediasfu-widget>

Deploy

Push your changes. The widget appears on your live site.

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>My Site with Calls</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>Talk to our team anytime.</p>

  <script src="https://cdn.mediasfu.com/widget.js"></script>
  <mediasfu-widget
    widget-key="YOUR_WIDGET_KEY"
    widget-type="click-to-call"
    button-text="Start Call">
  </mediasfu-widget>
</body>
</html>

All Widget Types

1. Click-to-Call Button

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="click-to-call"
  button-text="Call Now"
  position="bottom-right">
</mediasfu-widget>

2. AI Agent

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="ai-agent">
</mediasfu-widget>

3. Meeting Portal

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="meeting-join">
</mediasfu-widget>

4. Calls Dashboard

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="calls"
  width="400px"
  height="600px">
</mediasfu-widget>

5. Web Agent (Embedded)

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="web-agent-embed"
  width="100%"
  height="600px">
</mediasfu-widget>

6. Agent Dashboard (Full Interface)

<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="web-agent-dashboard"
  width="100%"
  height="700px">
</mediasfu-widget>

Configuration Attributes

Attribute	Values	Example
`widget-key`	Your MediaSFU ID	wk_abc123xyz
`widget-type`	click-to-call, ai-agent, meeting-join, calls, web-agent-embed, web-agent-dashboard	click-to-call
`button-text`	Any text	Talk to Us
`position`	bottom-right, bottom-left, top-right, top-left	bottom-left
`theme`	light, dark	dark
`width`	CSS width	100%, 400px
`height`	CSS height	600px, auto

Static Site Generators

Jekyll / Hugo / Eleventy

Add the HTML in your template files exactly as shown above. The script will load once and work across all pages.

Netlify

Just push your HTML with the script tag. It works automatically. No build configuration needed.

Vercel / Next.js (Static Export)

If using static export, add the widget in your HTML. For dynamic Next.js, use the React wrapper instead (see our React guide).

Testing

Open your site in a browser
Look for the widget button or element
Click it to test the connection
You should hear the call connect
Open browser console (F12) to check for errors

Troubleshooting

Widget not showing?

Verify the <script> tag is present and loads from cdn.mediasfu.com
Verify the widget element is in your HTML body (not commented out)
Check browser console for JavaScript errors (F12 → Console tab)
Refresh the page with hard reload (Ctrl+Shift+R or Cmd+Shift+R)

Widget key rejected?

Double-check the key copied correctly (should start with wk_)
Verify your domain is whitelisted in MediaSFU dashboard
Make sure the key is still active

Calls not connecting?

Test with a different browser
Allow microphone/camera access when prompted
Check your internet connection
Verify CDN can be reached: Visit https://cdn.mediasfu.com/widget.js in your browser

CORS or security errors?

MediaSFU CDN is publicly accessible and allows all origins
If you see CORS errors, it's usually a misconfiguration elsewhere
Contact support@mediasfu.com for help

Need help? Email support@mediasfu.com or visit mediasfu.com/docs. You can also fork example repositories on GitHub.