Embed in Squarespace — MediaSFU Widgets

Quick Start

Get Your Widget Key

Add a Code Block

In Squarespace Editor, click Add Block (+) → Code.

Paste the Widget Code

Copy one of the code snippets below, replace YOUR_WIDGET_KEY, and paste into the Code Block.

Publish

Click Done. The widget appears on your published site.

Note: Code Blocks require a Business plan or higher. If you're on Personal or Unlimited, try adding the code via Code Injection instead (Settings → Advanced → Code Injection).

Widget Code Examples

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="Call Now">
</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"
  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"
  height="700px">
</mediasfu-widget>

Installation Options

Option 1: Per-Page Code Block (Recommended)

Add the widget code in a Code Block on any page where you want it to appear. Easy to manage and update.

Option 2: Site-Wide Code Injection

Go to Settings → Advanced → Code Injection → Footer. Add your code there to appear on every page. Works on all plans.

Configuration

Customize the 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 — Label on the button (e.g., "Chat Now")
position — bottom-right, bottom-left, top-right, top-left
theme — light or dark
width — e.g., "100%", "400px"
height — e.g., "600px", "auto"

Troubleshooting

Code Block not available?

Upgrade to Business plan ($23/month) or use Code Injection instead

Widget not showing?

Verify the Code Block is saved and published
Check for JavaScript errors (F12 Developer Tools → Console tab)
Make sure your Squarespace domain is whitelisted in MediaSFU dashboard

Widget key rejected?

Double-check the key copied correctly (should start with wk_)
Verify your Squarespace domain matches the whitelisted domain in MediaSFU

Calls not working?

Test with a different browser (Chrome, Firefox, Safari)
Allow microphone access when prompted
Check your internet connection speed

Need help? Email support@mediasfu.com or visit mediasfu.com/docs.