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.

Daily.co Bubble Plugin

So to begin with, I've signed up for a 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 plug ins and go to the Daily Video Conferencing & Chat plugin. And I've installed that from the Bubble plug in 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. 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, list through all the meetings in my app. And I'm going to order them by date created, reverse order. Okay. And I'm going to add in a button. Let's 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 on the left hand side and my actual video view on the right-hand side. So let's bring that up to the top and I'll call this create new meeting. 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's comparable to a meeting in Zoom. So I'm going to add in a workflow. And as I've got the Daily plugging 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. But once the Daily API, that's what step one does, creates the room, I need to be able to create a room or meeting in my own app. So I can refer back to step one, name, and the name is comparable to your meeting ID in Zoom. It's the name is the unique ID, basically. And so we only really need that part. 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 sales meeting's name in there just so that we can see it's populated. And I'm going to make this 100 % width. And take out the rows, bring that down to, say, 20. Just because I'm being a bit neat, let's add in 32 bottom there. 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 that it's it's a column. Get rid of this width value there. What's going on here?

Why does that not fit? Min width. Okay. Groupr. Ahh Fit to content. There we go. So I've got a sidebar and I've got the main content. Now I need to provide an ID attribute here. And this is our way of providing the Daily plugin with an element to test. Target on the page to insert the video call 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 top up on ID attribute.

Basically, it's a way of naming an element within the code of the page. So then let's add 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 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.

Right, then the URL. If we go back to the data Daily developer console, when you sign up, you get given a subdomain. So the URL for me is pnc.daily.co, but it'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 it in dynamically there, current sales meetings name. And 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. 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... 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 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... There we go. So now I've got a fixed height that works a little bit better. Okay, so there you have it. This is basically me arriving into a Zoom room and other people can join us. And the way that they would join is that you get them to connect connect into the same room that's created using 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.