Integration options

MediaSFU prebuilt integration

Start with a complete room, add a focused website action, or build natively with an SDK. “Prebuilt” describes ready-made experiences; iframe embedding is only one available delivery path.

IframeFastest launch
WidgetsFocused entry points
SDKsFramework control
Compare integration paths See it running Jump to iframe code
Choose by product need

Three ways to ship a prebuilt experience

Begin with the smallest surface that solves the workflow. You can move between iframe, widgets, and SDKs without changing the backend.

Fastest complete room

Room iframe

Embed the full MediaSFU meeting experience inside an existing page or WebView.

Best for
Portals, classrooms, support rooms, and rapid prototypes
Setup
Room URL + iframe permissions
Control
Room configuration and credential handoff
Configure iframeSee room demos
Focused website actions

Website widgets

Add a join button, click-to-call, AI agent, meeting portal, or operator surface without embedding an entire room.

Best for
Product pages, support flows, sales, and AI assistance
Setup
Widget Studio + domain-locked embed
Control
Copy, theme, placement, routing, and public access
Open Widget StudioWidget guide
Native product integration

SDK prebuilt UI or headless

Use framework-native prebuilt components for speed, or headless APIs and hooks when your product owns the interface.

Best for
React, mobile, Flutter, Angular, Vue, and custom products
Setup
Install an SDK and initialize an event
Control
Prebuilt UI, components, events, media, and business logic
Compare SDK pathsHeadless guide

Simple rule: use an iframe for a whole room, a widget for one visitor action, and an SDK when your application must own the UI or respond directly to MediaSFU events.

How iframe embedding works

Three steps — no build tools, no package installs.

1

Get your room URL

Create a room via the dashboard or REST API. You receive a URL like https://meeting.mediasfu.com/room/...

2

Drop an iframe

Paste the URL into an <iframe> with allow="camera; microphone; display-capture; autoplay". Done.

3

Users join directly

Participants open your page and land in the room. Layouts, controls, and reconnection are handled by MediaSFU.

Choose your embed approach

Pick the integration depth that fits your product. All three use iframes under the hood.

Embed any MediaSFU room by pointing an iframe at the room URL. Camera, mic, screen share, and autoplay permissions are set via the allow attribute.

Integration codeChoose the environment that matches your application
30 lines
MeetingEmbed.jsxReact
1import React, { useEffect } from 'react';
2
3    const YourComponent = () => {
4      useEffect(() => {
5        // Open the iframe with the specified URL
6        openIframe('https://meeting.mediasfu.com/meeting/start/');
7      }, []);
8
9      const openIframe = (url) => {
10        const iframe = document.getElementById('mediasfuIframe');
11        iframe.src = url;
12        iframe.allow = 'camera *; microphone *; fullscreen *; display-capture *; autoplay *;';
13      };
14
15      return (
16        <div>
17          {/* Iframe */}
18          <iframe
19            id="mediasfuIframe"
20            src="https://meeting.mediasfu.com/meeting/start/"
21            width="100%"
22            height="100%"
23            frameBorder="5"
24            title="MediaSFU"
25          ></iframe>
26        </div>
27      );
28    };
29
30    export default YourComponent;
Beyond a full room embed

Use a smaller surface or take control of the product

Iframes suit complete rooms. Widgets and SDKs are better when the entry point or application behavior must be more specific.

Application integration

Choose SDK prebuilt UI or headless control

Mount ready-made meeting components when speed matters. Choose headless hooks, events, and media APIs when your own interface must drive the experience.

Compare SDK use cases Developer docsHeadless guide
Recommended starting point

Ship the smallest useful integration first

Use the iframe for a complete room, or start in Widget Studio when the page only needs a focused call, join, or AI action.

Configure iframe Open Widget Studio