How to create a Zoom clone with Bubble & Daily.co

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.