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.
Prerequisites
- 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
Choose and set up your video service
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.
Create room management via API Connector
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.
Embed the video call in a Bubble page
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.
1<iframe2 src="dynamic:Current Page Meeting's room_url"3 allow="camera; microphone; display-capture; autoplay"4 style="width:100%; height:600px; border:none;"5></iframe>Expected result: Opening the video-call page loads the video conference interface inside the Bubble page.
Build the scheduling and invitation flow
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.
Control access and manage meetings
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 working example
1VIDEO CONFERENCING — WORKFLOW SUMMARY2======================================34DATA TYPES:5 Meeting6 - room_url (text)7 - room_name (text)8 - host (User)9 - participants (list of Users)10 - scheduled_time (date)11 - status (Option Set: Scheduled/Active/Completed)12 - description (text)1314API CONNECTOR:15 DailyVideo API16 CreateRoom: POST https://api.daily.co/v1/rooms17 Auth: Bearer [api_key] (Private)18 Body: {"name": "<room_name>", "privacy": "public"}1920HTML EMBED (video-call page):21 <iframe22 src="[Current Page Meeting's room_url]"23 allow="camera; microphone; display-capture; autoplay"24 style="width:100%; height:600px; border:none;"25 ></iframe>2627WORKFLOW 1: Schedule meeting28 Action 1: Create Meeting (host, participants, time)29 Action 2: Call DailyVideo - CreateRoom30 Action 3: Make changes to Meeting31 room_url = Result of Step 2's url32 room_name = Result of Step 2's name33 Action 4: Send emails to participants3435WORKFLOW 2: Access control (Page is loaded)36 Only when: Current User NOT in participants AND NOT host37 Action: Navigate to access-denied page3839WORKFLOW 3: End meeting40 Action: Make changes to Meeting (status = Completed)Common mistakes when adding video conferencing to a Bubble app
Why it's a problem: Not adding camera and microphone allow attributes to the iframe
How to avoid: Add allow="camera; microphone; display-capture; autoplay" to the iframe element.
Why it's a problem: Using a hardcoded room URL instead of creating unique rooms
How to avoid: Create a unique room for each meeting using the API and store the URL in the Meeting record.
Why it's a problem: Not checking participant access on the video page
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and need video conferencing. I want to embed Daily.co or Jitsi video calls, create unique rooms for each meeting, schedule calls with invitations, and control participant access. How do I set this up?
Add video conferencing to my app using Daily.co. Create a Meeting data type, use the API Connector to create rooms, embed the video in an HTML iframe, and add scheduling with email invitations and access control.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation