How to create a Zoom clone with Bubble & Daily.co
In this Bubble.io tutorial video we demonstrate how to create a nocode Zoom clone using Bubble.io and Daily.co
Create a Zoom clone: Learn how to build a video conferencing app using Daily's video conferencing plugin and Bubble's no-code platform.
No-code video calls made easy: Discover how to integrate API connectors and design a simple interface for your own Zoom-like application.
Build a meeting platform without coding: Step-by-step guide to creating rooms, joining calls, and customizing your video conferencing experience in Bubble.
Creating a Zoom Clone with Bubble and Daily.co
In this Bubble tutorial video, I'm going to show you how to create a Zoom clone using no code building with Bubble. So let's dive right into it. We're going to be using the daily API. Daily is the third party service we'll be using to create meetings, to create rooms and then we're going to integrate that into the Bubble app. Let me show you how we do that.
Setting Up Daily API
To begin with, I've signed up for the daily account and I've gone into developer and they give you an API key. And so I'm going to copy the API key and then go into my Bubble app and go to plugins and go to the daily video conferencing and chat plugin and I've installed that from the Bubble plugin directory and then notice that I have to include the word bearer before my API key and I paste it in. And I will be regenerating this API key before we publish this video.
Designing the Interface
Let's design a really simple interface on our page. I'm going to add in a repeating group. This is going to show my different meetings. And so I'm going to create a data type called meetings. And I know from having used the daily API before, I know that we need a name field at the very least. So I'll create that as a text field and then I'm going to say this through all the meetings in my app. And I'm going to order them by take created reverse order.
Adding Buttons and Layout
Okay. And I'm going to add in a button. Just add that button in there. And I'm going to group the button and my repeating group into a column so that I get it on the left hand side. I'm going to create a list down the left hand side and my actual video view on the right hand side. So let's bring that to the top and I'll call this create new meeting.
Creating Workflow Actions
And let's start adding in the workflow elements, workflow actions to start creating a meeting. Basically daily has what they call rooms. And that is what that's comparable to a meeting in zoom. So I'm going to add in a workflow. And as I've got the daily plugin installed, I can find all of these extra actions here. And so I'm going to say create room. And there's a ton of different ways that you can customize it. I'm probably going to leave this all as default.
Setting Up the Meeting Data
But once the daily API, that's what step one does, creates the room. I need to be able to create a room in my or meeting in my own app. So I can refer back to step one, name and that the name is comparable to your meeting ID in zoom. Is the name is the unique ID basically. And so we only really need that part.
Designing the Meeting List
So then I'll add in some text. Into my repeating group, set the container out to column, just so it's a bit neater. And I'm going to print the current cell's meetings name in there, just so that we can see it's populated. And I'm going to make this 100% width. And take out rows, bring that down to say 20. Just because I'm being a bit neat, let's add in 32 bottom there.
Creating the Video Call Interface
Okay, now, so I've got a way of creating a group, but how would I join that meeting? So I'm going to add in a group element over on the right side of my page. So there's a column, get rid of this. Width value there. What's going on here? Why does that not fit in width? Okay. Group. Ah, it's content. There we go. So I've got a sidebar and I've got the main content.
Setting Up the Video Element
Now I need to provide an ID attribute here. And this is our way of providing the daily plugin with an element to target on the page to insert the video called into. So I'm just going to call this video. If you can't see ID attribute, you need to go into settings, scroll all the way down to the bottom. And there's an option there to toggle on ID attribute. Basically, it's a way of naming an element within the code of the page.
Creating the Join Meeting Workflow
So then let's have a workflow for when one of my meetings in my repeating group is clicked. I want to join that meeting. So I go to join the room. Room style, it needs to be custom position. This is because, I mean, you can choose these other options here, but in order to target that group, to make that group on the right hand side, the meeting, I have to do custom position. And then the element ID is going to be video, as that's what I entered in as the ID attribute.
Configuring the Meeting URL
Right. Then the URL. If we go back to the daily developer console, when you sign up, you get given a subdomain. So the URL for me is pnc.daily.co, but that'll be whatever you've created when you signed up. So I'll start building the URL here, pnc.daily.co. And then slash, and I can get a prompt here, says to add in the meeting, the room name. And so the room name is what I saved when I created the room. And so I add in dynamically there, current cell's meetings name. The other options here, meeting tokens, they're just ways to authenticate, basically check out the daily documentation. There's so much that you can do with this platform. I'm just keeping it really simple for this demonstration.
Testing the Application
Right. I think I can preview that now. So I'm going to create a new meeting. It's making the call to the API. And here is the meeting name. And so now if I click on this, I should, let's just adjust the height there. Maybe give this a, oh, that does have a min height. Okay. Let's just test it. So if I put in my name, Matt, and then allow the camera. Join. Okay. So we can see that that's working. Let me just quickly try and debug why it's appearing so small. So what if we just, what if we go for fixed width? Let's try that. So I'm going to refresh the page. Fixed height, fixed height. And then if I click on here, ah, there we go. So now I've got a fixed height that works a little bit better.
Conclusion
Okay. So there you have it. This is basically me arriving into a Zoom room. Ah, and other people can join this. And the way that they would join is that you get them to connect into the same room that's created using that, ah, that room name. Now, if you've got any questions, if you want me to expand on this tutorial, please reach out, leave a comment below. But this is it. This is the basics of how to create a Zoom clone without writing a single line of code. With Bubble, it's really cool. Any questions, leave a comment below.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.