How to Embed a Video Conference on Your Website Using Jitsi's IFrame API

Embedding real-time video conferencing has become essential for many web applications. In this guide, you’ll learn how to embed a video conference on your website using Jitsi’s IFrame API. This approach simplifies integration by loading the entire Jitsi Meet client through an iframe, so you don’t have to manage complex signaling or media streaming. You’ll find clear instructions, practical code examples, and useful tips drawn from real-world projects.

Why the IFrame API Is the Fastest Way to Add Jitsi to Your Site

If you’re choosing how to add video calls with Jitsi, the IFrame API stands out because it’s straightforward and quick. You embed an iframe element that loads the Jitsi client, handling everything behind the scenes. Unlike lib-jitsi-meet—which demands deeper work with WebRTC streams and signaling—the IFrame API manages those details for you.

I’ve applied this method in React, Vue, and plain JavaScript apps. It supports rapid development and deployment while letting you tweak UI elements and room settings to fit your needs.

The official JitsiMeetExternalAPI documentation recommends starting with the IFrame API. Its limitations, like restricted low-level media control or heavy customization, only disappear if you switch to lib-jitsi-meet.

The IFrame API offers these advantages:

• No manual handling of signaling or media streams
• Simple setup by creating a JavaScript object
• Support for event listeners to track user actions
• Built-in UI you can configure, including toolbar options
• Compatibility with JWT for secure, authenticated rooms

In short, if you want to embed video conferencing quickly and keep essential controls, the IFrame API fits well.

What You Need Before You Start Coding

Before embedding your video conference, ensure you have:

• A working Jitsi Meet instance or access to the public meet.jit.si server
• Basic JavaScript knowledge and familiarity with your chosen web framework
• Permissions to edit your website’s frontend code
• HTTPS serving enabled, which WebRTC requires
• (Optional) A way to generate JWT tokens if you want secure authentication

For development or demos, meet.jit.si works fine. For production, you’ll want your own Jitsi deployment or a managed service. That way, you control capacity, branding, and security.

One practical tip: In React apps, creating the Jitsi API instance inside component lifecycles can cause unwanted re-renders. Make sure you create the API only once and dispose of it properly on component unmount to avoid leftover iframes and event handlers.

Your page should also allow embedding Jitsi domains via Content Security Policy headers and permit cross-origin iframe loading.

How to Load and Initialize JitsiMeetExternalAPI

The main step is to instantiate a JitsiMeetExternalAPI object in your JavaScript.

1. Load the External API Script

Add this script tag to your HTML, or inject it dynamically in your framework:

<script src="https://meet.jit.si/external_api.js"></script>

You can host this script yourself for more control, but using the CDN is easiest.

2. Add a Container for the IFrame

<div id="jitsi-container" style="width: 800px; height: 600px;"></div>

3. Initialize the API with Basic Options

Here’s a simple example with JavaScript:

const domain = 'meet.jit.si'; // Or your own Jitsi server
const options = {
  roomName: 'MyUniqueRoom123',
  parentNode: document.getElementById('jitsi-container'),
  width: 800,
  height: 600,
  configOverwrite: {},
  interfaceConfigOverwrite: {}
};

const api = new JitsiMeetExternalAPI(domain, options);

The roomName should be unique per meeting and can be generated dynamically.

How This Looks in Popular Frameworks

• React: Use useEffect to create and dispose of the API instance, preventing multiple iframes.
• Vue: Initialize in mounted() and clean up in beforeDestroy().
• Angular: Use ngAfterViewInit() for creation and ngOnDestroy() for disposal.

Example React component snippet:

import React, { useEffect, useRef } from 'react';

const JitsiComponent = ({ roomName }) => {
  const containerRef = useRef(null);
  let api = null;

  useEffect(() => {
    api = new window.JitsiMeetExternalAPI('meet.jit.si', {
      roomName,
      parentNode: containerRef.current,
      width: '100%',
      height: 600
    });

    return () => api.dispose();
  }, [roomName]);

  return <div ref={containerRef} style={{ height: 600 }} />;
};

Fine-tuning Room Options and Interface Settings

Jitsi makes it easy to adjust the embedded experience.

Use configOverwrite to set defaults like:

const configOverwrite = {
  startWithAudioMuted: true,
  startWithVideoMuted: false,
  disableDeepLinking: true,
  enableWelcomePage: false
};

Use interfaceConfigOverwrite to customize UI elements:

const interfaceConfigOverwrite = {
  TOOLBAR_BUTTONS: [
    'microphone',
    'camera',
    'desktop',
    'fullscreen',
    'chat',
    'raisehand',
    'tileview'
  ],
  SHOW_JITSI_WATERMARK: false,
  SHOW_WATERMARK_FOR_GUESTS: false,
  DEFAULT_REMOTE_DISPLAY_NAME: 'Guest'
};

Apply these configurations when you initialize:

const options = {
  roomName: 'MySecureRoom',
  parentNode: document.getElementById('jitsi-container'),
  configOverwrite,
  interfaceConfigOverwrite,
  width: 800,
  height: 600
};

const api = new JitsiMeetExternalAPI(domain, options);

You can toggle recording buttons, adjust layout, and localize your interface this way. The disableDeepLinking option prevents users from accidentally leaving the meeting tab.

Listening to Events: Join, Leave, Mute, and Errors

The API sends event callbacks you can use to sync your app with conference activities.

Here are some key ones:

• videoConferenceJoined fires when the user joins
• videoConferenceLeft fires when the user leaves
• participantJoined and participantLeft notify of participant changes
• audioMuteStatusChanged and videoMuteStatusChanged track mic and camera toggles
• error signals problems within the iframe

Example usage:

api.addListener('videoConferenceJoined', () => {
  console.log('User successfully joined the meeting');
});

api.addListener('participantJoined', (participant) => {
  console.log('Participant joined:', participant.displayName);
});

api.addListener('audioMuteStatusChanged', (status) => {
  console.log('Audio muted:', status.muted);
});

api.addListener('error', (error) => {
  console.error('Error in Jitsi iframe:', error);
});

In complex apps, you can use these events to update your UI—for example, showing participant counts or disabling controls when muted.

Securing Your Room with JWT Authentication

Securing meetings is often necessary, especially if access must be restricted. The IFrame API supports passing JWT tokens for authentication.

Here’s the process:

• Your backend creates a JWT signed with the Jitsi secret key
• The token contains user info, room permissions, and expiry
• You pass the token during API initialization

Implementation looks like this:

const options = {
  roomName: 'SecureRoom123',
  parentNode: document.getElementById('jitsi-container'),
  jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...', // Your generated JWT
  width: 800,
  height: 600
};

const api = new JitsiMeetExternalAPI(domain, options);

This way, only authorized users gain access. The backend must handle token issuance and refresh securely.

Remember these points:

• Enable JWT authentication on your Jitsi server
• Ensure tokens contain correct claims and are valid
• Malformed or expired tokens prevent connection

Common Issues and How to Solve Them

Here are frequent problems when integrating Jitsi’s IFrame API:

1. Missing or blocked external_api.js

If JitsiMeetExternalAPI is undefined, check if the script loaded or got blocked by CSP. Confirm your page allows scripts from Jitsi’s domains.

2. Domain not whitelisted

For self-hosted Jitsi, the iframe’s hosting domain must be whitelisted in your Jitsi config. Missing this causes domain errors and iframe failures.

3. Event handlers not triggering or iframe glitches

Especially in React or Vue, improper API creation or cleanup causes lost events or memory leaks. Create the API once and call dispose() on component unmount.

Monitoring errors via the API’s error event helps find problems in real time.

When to Use lib-jitsi-meet Instead

The IFrame API covers most use cases. But if you need full control over media streams, signaling, or want to build a tailored UI, lib-jitsi-meet is the way to go.

Use lib-jitsi-meet when you want:

• Direct access to raw audio/video streams
• Custom signaling logic with proprietary protocols
• Detailed management of participants and bandwidth

It demands solid WebRTC knowledge and more coding effort but gives complete flexibility for complex apps.

Start by exploring the official repo and its API. It works alongside the IFrame API rather than replacing it.

---

Final Thoughts

Embedding video conferencing on your website with Jitsi’s IFrame API provides a fast, practical solution. This guide has shown you how to:

• Initialize and configure your embedded meeting
• Customize UI and room settings
• Respond to key events for integration
• Secure sessions using JWT tokens
• Troubleshoot common problems

For most projects, this balances speed and flexibility. When your app needs more detailed control, lib-jitsi-meet offers that extra layer.

Begin by adding the IFrame API in your dev environment. Add JWT authentication to secure rooms, and use event callbacks to enhance your interface. If required, move toward lib-jitsi-meet for deeper customization.

Take Action Now

Build a secure, embedded video conference suited to your needs starting today with Jitsi’s IFrame API. Visit the official Jitsi IFrame API documentation for up-to-date guidance.

If you want expert help with integrating or customizing Jitsi within your app, reach out for a technical assessment and hands-on support. Deliver seamless, secure collaboration backed by best practices.