Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

No Code Video Conferencing App with WHEREBY - Part 3

Learn how to leverage Bubble.io and the power of no-code development to create a video conferencing app with ease. Dive into the tutorial series and explore the seamless integration of the Whereby API, all while mastering Bubble's capabilities for web app development.

Welcome back to part three

Welcome back to part three of our tutorial series where we're looking at combining the Whereby API with Bubble to build a no code video conferencing app. In this video I'm going to demonstrate what we do from this page where we've got a list of the meetings we've created. We create a meeting in Bubble and we create a meeting in whereby. And how do we actually now link through to the ability for a user to join a call? Well, let's dive right into that.

Learning Bubble and more videos

But before I do that, if you're learning Bubble and you want to see more videos just like this one, head to our website, planetnoco.com. There is a link down in the description and yeah, just a fantastic resource for learning Bubble. I personally have recorded hundreds of bubble tutorial videos just like this one. So let's jump right in here which is that we've got our repeating group and we want to link off to a page where we show a single instance of a meeting. So we can do that.

Creating a page for a single meeting

And I'll do that by creating a page and saying meeting. And so that I've got a starter with UI elements, I'm going to just clone the index page. Let's delete the repeating group, let's delete that button and so that I can tell a difference when I'm debugging it. I'm just going to try to hear live meeting. Make that a little bit wider, even wider than that.

Let's just say 50% right. So this page is going to be a template for all of our meetings. When we link through from the repeating group we're going to arrive on this page and we need bubble to send through meeting details or an entry from the database. And Bubble is an amazing no code web app development platform. We don't need to worry about unique ids.

Bubble takes care of it. And we can do that by going onto the page and saying the type of content and setting it to meeting. And so now if I go back to my index page and I go on join and add a workflow and then the go to page workflow which is in navigation, I can set a destination of meeting. But you notice now I have an issue and that's because I can only now go to the meeting page if I send a single meeting from my database. Well which meeting do I want to send?

It's the meeting that's in the current cell of the repeating group or the button that I just clicked. Okay, so we say current cells meeting and that then means that we can go into meeting and I can update this and pull in data from the page. So I can say current page is meeting room name. Now the room name is randomly generated, I think. So it's not going to mean much.

In fact, let's make this 100% width now and let's do a quick demo.

So I clicked on preview on my meeting page and I get Lorem ipsum. Now that's because bubble is showing me this template of a page for a meeting, but I've not actually put a meeting in the data. So what I really need to do is go back here, index preview my index page. Okay. Now I can click join on this meeting, this event, this room that I created previously.

And you can see I go through and I get to the page all about that particular meeting. So yeah, we're missing a key bit here, which is we've not actually shown any chat video conferencing features. So let's dive back into the API documentation and we can see that they provide a low code option which uses an iframe. So I'm going to copy the iframe code, go back into my editor, I accidentally closed the bubble editor. Let's go back into that and go onto our meeting page.

Adding video conferencing with iframe

So I'm going to add in a HTML block and set its width to 100%.

I'm going to leave, we'll see how it responds to height. I'm not sure, to be honest. Let's paste in the iframe code and we want to here replace the, we want to insert some dynamic data in here because we need to show the URL that was returned when we created the room through the whereby embedded API. So let's go current pages meeting URL. Okay, and now remember, if I click preview, it's not going to work because it's going to have Lorem Ipsum, which is dummy content.

So I need to always access my page through my repeating group now basically. So let's go back to index to get there, just as I was saying.

Right. And so now if I click join.

Okay, we have got a slightly od thing going on here, but we can see that something has worked because it has indeed embedded something from whereby, but it's way too small. So let's go back meeting and I'm wondering what we need to do here. Maybe we'll set the min height to say 500. Let's try that. But otherwise I'm going to add a bit of extra code in here, note.

So it's determined to only make it that big. Let's add in a bit of extra code so we can say iframe. We'll put a bit of css in here. So we'll basically inline style the iframe. So let's say width 100%.

Is that going to make a difference? That looks good. And then I'm also going to put a height value in there. Now we are using an iframe technique here, which iframes are not an incredibly good way of embedding content from another site, whereby does have a script based way of doing it, which we'll probably record a video on. But I'm demonstrating the iframe method of doing this because it's really quick and you get results very quickly from it.

So let's now say the height is 500 pixels and just make sure that the height of our element is 500 pixels. Let's make that slightly bigger to account for any padding it adds in. Brilliant. Let's go back here and refresh.

Okay, that's looking much better. So if I put in my name and then it's going to any browser based video conferencing, I've got to approve it through my browser. Okay, cool. And there we go. So I'm now in a meeting and if I was to share this page with any other users in my app, then they would also be joining this same meeting.

So there we go. That's how you can add a video conferencing widget or video conferencing element into your bubble app using the whereby embedded API and iframe. In the next video, I'm going to cover things like privacy rules and how to register and log in your users. And I would just say that is essential viewing because. Right.

You don't want strangers hopping into meetings or email addresses of your users being leaked out. Privacy rules are an essential part of security when building a bubble. So see you in the next video.

Latest videos

lockcrossmenu