Embedding Jitsi in React
Step-by-step guide to adding a working Jitsi video room to your React app.
What We Are Building
A React component that renders a video call room. You pass it a room name and it shows a fully functional video conference. We will also cover how to generate unique room names tied to your appointment IDs so each meeting gets its own private room.
Step 1 — Install the Package
Open your terminal in your project folder and run:
That's the only installation step. No other dependencies.
Verify it's in your package.json:
The version number may be higher than this — that's fine.
Step 2 — The Minimum Working Component
This is the simplest possible Jitsi embed. Three required props: domain, roomName, getIFrameRef.
Use it in a page like this:
When you open this page, a full video call interface appears inside your app. The room sahinov-demo-room on meet.jit.si is live. If you open the same page in another browser tab, both tabs join the same room.
Step 3 — Adding User Info
Without this, participants show up as "Fellow Jitster" (Jitsi's default name). Add the userInfo prop so participants have real names:
In a real app, you pull these from your auth context (the logged-in user's name and email):
Step 4 — Customizing the Call Behaviour
The configOverwrite prop lets you set initial call settings. These are the most useful ones for professional consultation apps:
startWithAudioMuted: true is strongly recommended for consultation apps. When multiple participants join, having everyone muted by default avoids the chaotic "everyone talking at once" moment. Participants unmute themselves when ready.
Step 5 — Generating Unique Room Names
For a parent-teacher meeting system, each appointment needs its own room. The room name should be unique and unpredictable (so random strangers don't stumble in).
Pattern: use the appointment ID + a random suffix
In practice, you'd store the room name in your appointments table when the appointment is created, so both the teacher and the parent load the same name:
Then on the appointment detail page:
The Complete VideoRoom Component
Putting it all together — a production-ready Jitsi component:
Testing It Locally
Run your dev server: npm run dev
Navigate to the page with your VideoRoom component.
Your browser will ask for camera and microphone permission — click Allow.
You should see a full Jitsi video interface inside your page.
Open the same page in a second tab or on your phone — both should be in the same room.
Localhost limitation: meet.jit.si requires HTTPS for camera and microphone in most browsers. On localhost, Chrome usually allows it as an exception. Safari may not. If the camera/mic doesn't work locally, deploy to Vercel (HTTPS) and test there.
What's Next
Jitsi is great for prototyping. When you need rooms that expire, participant access control, and server-side room management — move to Daily.co. The next two pages cover exactly that.