Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jitsi/jitsi-meet/llms.txt

Use this file to discover all available pages before exploring further.

The Jitsi Meet IFrame API lets you embed a complete, production-ready video conference directly into any web page. By loading a single JavaScript file from your Jitsi server, you get access to the JitsiMeetExternalAPI constructor, a rich set of commands, and a full event system — all without managing any backend infrastructure. This quickstart walks you through every step, from adding the script tag to listening for participant events, so you can go from zero to a live embedded meeting in under five minutes.

​
Prerequisites

  • A modern browser with WebRTC support (Chrome, Firefox, Edge, or Safari 14+)
  • A text editor and a way to serve an HTML file (even python3 -m http.server works)
  • No server-side code or account required when using meet.jit.si

​
Steps

1
Load the IFrame API Script
2
Add the Jitsi Meet External API script to the <head> (or end of <body>) of your HTML page. The script is served directly from the Jitsi instance you want to connect to:
3
<script src="https://meet.jit.si/external_api.js"></script>
4
This script exposes the JitsiMeetExternalAPI class globally. If you are self-hosting, replace meet.jit.si with your own domain — the script must always be loaded from the same domain as the server that will host the meeting.
5
For production workloads, point this script tag — and the domain option in the next step — at your own self-hosted Jitsi instance or your JaaS subdomain (8x8.vc) rather than the public meet.jit.si. The public instance is rate-limited and not suitable for high-volume or branded deployments.
6
Create a Container Element
7
Add a <div> to your page where the meeting iframe will be injected. Give it an id so you can reference it from JavaScript:
8
<div id="meet"></div>
9
You can size this element with CSS to fit your layout — the API will match the iframe to the container’s dimensions, or you can pass explicit width and height options in the next step.
10
Initialise the API
11
After the script has loaded, create a new JitsiMeetExternalAPI instance. Pass the domain as the first argument and an options object as the second:
12
const domain = "meet.jit.si";

const options = {
  roomName: "MyAwesomeProjectKickoff",   // unique room name (no spaces)
  width: "100%",                          // iframe width (px or %)
  height: 600,                            // iframe height in px
  parentNode: document.getElementById("meet"), // container element
  configOverwrite: {
    startWithAudioMuted: true,            // join muted by default
    disableModeratorIndicator: false,
  },
  interfaceConfigOverwrite: {
    TOOLBAR_BUTTONS: [                    // limit visible toolbar buttons
      "microphone", "camera", "closedcaptions",
      "desktop", "chat", "raisehand",
      "videoquality", "tileview", "hangup",
    ],
  },
};

const api = new JitsiMeetExternalAPI(domain, options);
13
The roomName uniquely identifies the conference. Anyone who loads the page (or visits the same room URL on meet.jit.si) will join the same call. The configOverwrite and interfaceConfigOverwrite objects let you override any option from config.js and interface_config.js respectively without touching server files.
14
Listen to Events
15
The api object is an EventEmitter. Use .on(eventName, listener) to react to meeting lifecycle events:
16
// Fired when the local participant successfully joins the conference
api.on("videoConferenceJoined", (event) => {
  console.log("Joined room:", event.roomName);
});

// Fired when the local participant leaves or the conference ends
api.on("videoConferenceLeft", (event) => {
  console.log("Left the conference:", event.roomName);
  // e.g. redirect the user or clean up the container
});

// Fired whenever a remote participant joins
api.on("participantJoined", (event) => {
  console.log("Participant joined:", event.jid);
});

// Fired when audio mute state changes
api.on("audioMuteStatusChanged", (event) => {
  console.log("Audio muted:", event.muted);
});
17
You can listen to as many events as you need. See the IFrame API events reference for the complete list of available events.
18
The full IFrame API supports dozens of events, including participantLeft, dominantSpeakerChanged, recordingStatusChanged, knockingParticipant, and more. Check the IFrame API events page for the authoritative reference.
19
Execute Commands
20
You can programmatically control the meeting at any time by calling api.executeCommand(commandName, ...args):
21
// Toggle the local participant's microphone
api.executeCommand("toggleAudio");

// Toggle the local participant's camera
api.executeCommand("toggleVideo");

// Change the meeting subject shown in the header
api.executeCommand("subject", "Sprint Review — Week 42");

// Set the local participant's display name
api.executeCommand("displayName", "Jane Smith");

// Hang up and leave the conference
api.executeCommand("hangup");
22
Commands are fire-and-forget — they are sent to the embedded iframe as postMessage calls and take effect asynchronously. To clean up the iframe entirely after hanging up, call api.dispose().

​
Complete Working Example

The snippet below is a self-contained HTML page you can save and open in a browser right now. It is based on the official example from the Jitsi Meet repository. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embedded Jitsi Meet</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; background: #1e1e2e; color: #cdd6f4; }
    header {
      padding: 1rem 1.5rem;
      display: flex; align-items: center; gap: 1rem;
    }
    #meet { width: 100%; height: calc(100vh - 56px); }
    button {
      padding: 0.4rem 1rem; border-radius: 6px; border: none;
      background: #cba6f7; color: #1e1e2e; cursor: pointer; font-weight: 600;
    }
    button:hover { background: #b4befe; }
  </style>
</head>
<body>
  <!-- Script MUST be loaded from the same domain as the meeting server -->
  <script src="https://meet.jit.si/external_api.js"></script>

  <header>
    <span>Embedded Meeting</span>
    <button onclick="toggleAudio()">Toggle Mic</button>
    <button onclick="hangup()">Leave</button>
  </header>

  <div id="meet"></div>

  <script src="meeting.js"></script>
</body>
</html>

​
Next Steps

IFrame API Reference

Full list of commands, events, and getters available on the JitsiMeetExternalAPI object.

Self-Hosting Guide

Run your own Jitsi Meet instance on Debian/Ubuntu or Docker for production and branded deployments.

Build docs developers (and LLMs) love

Get started for freeTalk to us