Embed in Webflow

Quick Start

Widget Code Snippets

Click-to-Call Button

<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>

AI Agent

<script src="https://cdn.mediasfu.com/widget.js"></script>
<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="ai-agent">
</mediasfu-widget>

Meeting Portal

<script src="https://cdn.mediasfu.com/widget.js"></script>
<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="meeting-join">
</mediasfu-widget>

Calls Dashboard

<script src="https://cdn.mediasfu.com/widget.js"></script>
<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="calls">
</mediasfu-widget>

Web Agent

<script src="https://cdn.mediasfu.com/widget.js"></script>
<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="web-agent-embed"
  width="100%"
  height="600px">
</mediasfu-widget>

Agent Dashboard

<script src="https://cdn.mediasfu.com/widget.js"></script>
<mediasfu-widget
  widget-key="YOUR_WIDGET_KEY"
  widget-type="web-agent-dashboard"
  width="100%"
  height="700px">
</mediasfu-widget>

Configuration Options

Customize your widget with these attributes:

• widget-key (required) — Your MediaSFU widget ID
• widget-type (required) — click-to-call, ai-agent, meeting-join, calls, web-agent-embed, web-agent-dashboard
• button-text — Text on the button (e.g., "Connect Now")
• position — bottom-right, bottom-left, top-right, top-left
• theme — light or dark
• width — CSS width (e.g., "100%", "400px")
• height — CSS height (e.g., "600px", "auto")

Advanced: Global Script Injection

To load the MediaSFU script site-wide (so you can use multiple widgets on different pages), add this to your Webflow project settings:

Go to Project Settings → Custom Code → Head Code:

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

Then you can omit the <script> tag from individual Embed elements and just use the widget tag.

Testing Your Widget

1. In Designer, click Preview to see the widget live
2. Or publish your site and visit it in a browser
3. Click the widget button or element
4. Verify you hear the call connect
5. Check the browser console (F12) for any errors

Troubleshooting

Widget not appearing?

• Verify the Embed element is selected and shows your code in the HTML field
• Make sure both the <script> and widget tags are present
• Try refreshing the preview or published page (Ctrl+Shift+R)

Widget key rejected?

• Check the key format (should start with wk_)
• Verify your Webflow domain is whitelisted in MediaSFU dashboard
• Ensure the key is still active

Calls not connecting?

• Allow microphone/camera access when prompted
• Test in a different browser (Chrome, Firefox, Safari)
• Check your internet speed
• Verify the widget key is configured in MediaSFU dashboard