# How to add video conferencing to a Bubble app
- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans (video service account required)
- Last updated: March 2026
## TL;DR
Add video conferencing to your Bubble app by embedding a third-party service like Daily.co or Jitsi via an HTML element, creating meeting rooms linked to your app's data, scheduling video calls with calendar integration, and managing participant access. This brings real-time video communication without custom code.
## Overview: Adding Video Conferencing to a Bubble App
This tutorial shows you how to integrate video conferencing into your Bubble app using external services like Daily.co, Jitsi, or Twilio Video. You will embed the video interface using an HTML element, create meeting rooms linked to your app's events or bookings, schedule calls with invite links, and manage access controls.
## Before you start
- A Bubble account with an existing app
- An account with a video service (Daily.co free tier, Jitsi, or Twilio)
- Basic understanding of Bubble HTML elements and workflows
- Familiarity with the API Connector for room creation
## Step-by-step guide
### 1. Choose and set up your video service
Create an account with Daily.co (recommended — generous free tier of 2,000 participant minutes/month). In your Daily.co dashboard, get your API key. Daily.co provides simple embed URLs: each room has a URL like https://yourdomain.daily.co/room-name. Alternatively, use Jitsi Meet (fully free, open source) with URLs like https://meet.jit.si/your-room-name. Both can be embedded in Bubble via iframe.
**Expected result:** You have a video service account and API key ready for integration.
### 2. Create room management via API Connector
Go to the Plugins tab, open the API Connector, and add a new API called DailyVideo. Create a call named CreateRoom: POST to https://api.daily.co/v1/rooms with header Authorization: Bearer [your_api_key] (marked Private). The body includes room configuration like name and privacy settings. Initialize the call. Create a Meeting data type in Bubble with fields: room_url (text), room_name (text), host (User), participants (list of Users), scheduled_time (date), and status (Option Set: Scheduled, Active, Completed).
**Expected result:** The API Connector can create video rooms, and a Meeting data type stores room details.
### 3. Embed the video call in a Bubble page
Create a page called video-call with type Meeting. Add an HTML element sized to fill most of the page. Set its content to an iframe pointing to the meeting room URL: use a dynamic expression to insert Current Page Meeting's room_url into the iframe src attribute. The iframe should have allow attributes for camera, microphone, and screen sharing. Add a Leave button that navigates back to the previous page.
```
```
**Expected result:** Opening the video-call page loads the video conference interface inside the Bubble page.
### 4. Build the scheduling and invitation flow
On a scheduling page, add a Date Picker for the meeting time, a Multiline Input for the meeting description, and a user search to select participants. The workflow: Create a new Meeting with the scheduled time and participants. Then call the DailyVideo API to create a room. Update the Meeting with the returned room_url. Send email invitations to each participant with the meeting link and scheduled time.
> Pro tip: Generate a unique room name by combining the meeting ID with a timestamp to avoid naming conflicts.
**Expected result:** Users can schedule video meetings, and participants receive email invitations with the meeting link.
### 5. Control access and manage meetings
On the video-call page, add a Page is loaded check: Only when Current User is in Current Page Meeting's participants or Current User is the host. If not, redirect to an access denied page. Add meeting controls: a Start button that changes status to Active, an End button that changes status to Completed. For Daily.co, you can also pass a token parameter in the URL for additional security. For enterprise video with recording and transcription, consider working with RapidDev.
**Expected result:** Only invited participants can join the meeting, and the host can manage meeting status.
## Complete code example
File: `Workflow summary`
```text
VIDEO CONFERENCING — WORKFLOW SUMMARY
======================================
DATA TYPES:
Meeting
- room_url (text)
- room_name (text)
- host (User)
- participants (list of Users)
- scheduled_time (date)
- status (Option Set: Scheduled/Active/Completed)
- description (text)
API CONNECTOR:
DailyVideo API
CreateRoom: POST https://api.daily.co/v1/rooms
Auth: Bearer [api_key] (Private)
Body: {"name": "", "privacy": "public"}
HTML EMBED (video-call page):
WORKFLOW 1: Schedule meeting
Action 1: Create Meeting (host, participants, time)
Action 2: Call DailyVideo - CreateRoom
Action 3: Make changes to Meeting
room_url = Result of Step 2's url
room_name = Result of Step 2's name
Action 4: Send emails to participants
WORKFLOW 2: Access control (Page is loaded)
Only when: Current User NOT in participants AND NOT host
Action: Navigate to access-denied page
WORKFLOW 3: End meeting
Action: Make changes to Meeting (status = Completed)
```
## Common mistakes
- **Not adding camera and microphone allow attributes to the iframe** — Without these, the browser blocks the embedded video service from accessing the user's camera and microphone Fix: Add allow="camera; microphone; display-capture; autoplay" to the iframe element.
- **Using a hardcoded room URL instead of creating unique rooms** — All users end up in the same room, breaking privacy and causing confusion Fix: Create a unique room for each meeting using the API and store the URL in the Meeting record.
- **Not checking participant access on the video page** — Anyone with the URL can join the meeting, even if they were not invited Fix: Add a Page is loaded check that redirects unauthorized users.
## Best practices
- Create unique rooms per meeting using the video service API
- Add camera and microphone permissions to the iframe allow attribute
- Check participant access on page load before showing the video
- Send email invitations with the meeting link and scheduled time
- Add a Leave button that navigates back rather than relying on browser close
- Track meeting status (Scheduled, Active, Completed) for management
- Delete rooms after completion to stay within free tier limits
## Frequently asked questions
### Is Daily.co free?
Daily.co offers 2,000 free participant minutes per month. For small apps with occasional meetings, this is sufficient. Paid plans start at $0.0025 per participant minute.
### Can I use Zoom instead?
Yes. Use the Zoom API to create meetings and embed them using Zoom's Web SDK in an HTML element. This requires a paid Zoom plan with API access.
### Can I record meetings?
Daily.co supports recording on paid plans. Recordings are stored on their servers and accessible via API. You can store the recording URL in your Meeting record.
### How many participants can join?
Daily.co free tier supports up to 200 participants per room. Jitsi supports up to 75 participants with good quality. Actual limits depend on participant bandwidth.
### Can RapidDev help build a video platform?
Yes. RapidDev specializes in Bubble development and can build full video platforms with recording, transcription, screen sharing, virtual backgrounds, and breakout rooms.
---
Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-a-video-conference-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-a-video-conference-feature-in-bubble