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

No Code Video Conferencing App with WHEREBY - Part 1

Explore the possibilities of creating your own video conferencing web app using no-code platforms like Bubble.io with expert guidance from a no-code educator. Discover how to seamlessly integrate the whereby REST API and Bubble to develop your very own no-code video conferencing application.

Whereby: whereby.com/information/embedded

Introduction

What if there was a way for you to create your very own video conferencing web app, even if you're not a coder? My name is Matt. I'm a no code and bubble educator. I've created hundreds of bubble tutorial videos, and this is going to be one of them because I'm going to be showing you how you can combine the power of the whereby embeddable API with bubble, which is an amazing no code web app development platform. And in this miniseries, I'm going to take you through every step needed in order to add in video conferencing or even create your own no code video conferencing app.

Getting Started with Bubble

By combining together these two services, we're going to be looking at the whereby rest API. Now, don't worry if this looks very daunting. I'm going to take you through every step of the way. But to start with, you need to sign up for a Bubble IO account and then create a new app. And you will arrive at a screen like this.

Creating a Meeting

So I'm simply going to say skip application assistant, and then I'm here. And again, don't be daunted by this. I'm going to take you through every step of the way. This is a great tutorial for beginners all the way through to advanced because I'm going to explain every bit of bubble along the way. So let's dive into it.

I would say the first thing we need to add into our app is a way to create a meeting. So I'm going to go into data and add in a data type, and the data type is going to be called meeting. And I'm going to tick this box, say make this data private by default. In a later part of this miniseries, I'll be explaining exactly what we need in order to secure our app and ensure that things remain private. That should be private, but for now, we'll just set it as default because that's going to help us out later.

And then let's just give the meeting a label.

And why not also give it a date? Or we'll just say starts at and then we pick a date field. Okay, so let's go back to design. And something that people find a little bit uncomfortable about bubble is that you start with a blank canvas. But what that means is it gives you real freedom about what you can do.

So I'm not restricted by the type of UI design that other no code web application builders have. I basically can make this look pretty much exactly how I like. So I'm going to go to layout and change this into a column. And I'm going to go back to the page and let's add a background color to the page so we have a bit of contrast. I'm now going to add in a group and groups in bubble are a way of grouping together elements.

It's think of it like a div block if you've got any background in more traditional web design web development. So let me set this also to a row and width. I'm going to say 100% because I'm going to build in a way that I intend for this app to be responsive. So even though Bubble is designed as a web app, no code creation platform, it can be responsive. So you can build progressive web apps with this.

You can build apps that work really well in the mobile browser. And in fact later on this year, 2024 bubble have said that they will be bringing in an editor that allows you to build native apps for iOS and Android. So that'd be really exciting when that happens. But for now, let's stick with the basics. I'm going to just add in a bit of white there.

Building the User Interface

Right now let's add in the body of our page here. I'm going to say this is also a column and I'm going to say that this has a max width of, let's say just say 900 for now, get rid of the min width and then I'm going to center it on the page so you can see that it places it in the middle of the page. I'm then going to add in some padding.

Okay. And then let's add in a title and I'm not going to pay too much attention to UI design. I'm going to use a lot of the styles that bubble comes preloads for you when you create an app. So let's just say meetings. Perfect.

Okay, now I'm going to add in a button and I'll say create. And I want my button and my meetings label to appear on the same row. So I've highlighted both of them by holding shift and clicking on each in turn. And then I right click on one and I say group in elements in container row. And then I'm just going to swap these round.

So say make that one last, place it in the middle and then the container layout for my row. There we go. Space between. Right. So what happens when someone clicks create?

Creating a Meeting Pop-up

Well, let's use a pop up because as I link in with the whereby API, I'm going to be adding in a few additional tools, features and fields. That's mainly what I mean. So let's add in a pop up and also set this to column. Nice bit of say pop up. Let's go 24 padding all the way around.

Let's add in a label.

We'll say create new meeting and let's make that width 100% as well. So all goes onto one line. Perfect. So what do we need for our meeting? Well, we need a couple of inputs.

I'm going to take in a regular text input and also set this to width 100%. I'm doing width 100% so that it will be responsive. And then we also need a date time picker. Let's place that in there, change the input type to date and time. Then on the pop up I'm going to go into layout and add a gap between elements.

That just helps me achieve a really nice uniform design. That's too much. Let's just go for four and then add in my button, say save.

Then let's tidy this up. Min height. If I put in zero, it's going to collapse the size of the parent down to just what is needed to hold the children. So let's set up our first workflow. I'm going to go back a step because first things first is we need to show that pop up.

So I click on the create button and I'll click add workflow. And then I'm just going to click in here and type in show if you're unsure where that appears from. If I go all the way back, it's going to be an element actions show. So I can say show pop up. And then why don't we just go ahead and preview that right away so I can prove to you this.

No coding is amazing. So create. And there we go. All without writing a single line of code. So when the pop up is shown we want to say that these fields cannot be empty and we want to save a record of this meeting into our database.

Now in the next video, that's where I'm going to cover actually how we create that meeting in whereby. But right now I'm getting the basics of the UI design down for us. So we're going to go data create a new thing. And there's our meeting type that we created a few minutes ago and the label. And now I'll just match it up to my inputs.

So it's input a is what I set up for the label. But input a isn't very descriptive. So I'm going to go in and change placeholder and I will say, what is this meeting about? Okay, now you'll notice that Bobble has updated the internal labeling of this label. So if I go back into workflow, we can see that it's now updated input.

What's this meeting? Okay. Really helps to use placeholders to relabel as you go along. Then starts at. I just look for my date picker.

There we go. Right. What I want to happen when I've created the meeting? Well, I want to reset the relevant inputs so that when you open the pop up again, it's not going to have the previous set of data in there and I want to hide the element.

Let's preview that once more. So let's click create. What's this meeting about?

No code fans. And then I'm going to pick a date in the future. I click save right now. What's happened here? We can't see anything, but if we go into data now and then app data, we can see that we now have a line in our table.

So you can think of data types in bubble, like different sheets in excel, each sheet has got its own table. And so here it is. This is the start date we've selected, and that's a little bit buggy of bubble. But anyway, you can see that the label works. So now I just want a way of displaying this, but I'm going to make one bit of UI improvement, which is that when the pop up was shown, I had to click inside that first input.

I'm lazy and I think many users are lazy. So I'm going to set focus on that element, which means, well, let me show you what it does. Let's go back here and refresh. Now when I click create, I don't have to click in there, my cursor is there. So let's finish this video by showing how you would list through meetings in your database.

Listing Meetings

So we need a repeating group element, and the repeating group element allows us to list through elements. I'm going to add a little bit of margin to this bar at the top, let's say 30, and then back on our repeating group. So what content do we want to show in the repeating group? We want to show meetings. And how do we find meetings?

Well, we do a search for meetings and this will return all of the meetings in the database that this user has access to. Now again, there'll be a further explanation in a later video about privacy rules, but effectively this means that if a user, based on what we've done so far, if a user creates a meeting, they can access.

Oh, and you might have also noticed that actually we are creating meetings but we aren't logged in. Again, I'm going to cover that in a later video, but as a sneak peek. Effectively bubble uses a cookie to measure a session. I can take actions as a logged out user, non registered. And then if I were to register or I were to log in as a user, then I kind of inherit any previous actions into that user.

But for what we're doing for testing here, this is fine. Let's get rid of the row limit and make this into a row. So in the row we're going to have our label. So insert current sales meetings label. I'm going to copy and paste this now because we're also going to have the start date.

I'm going to format that. Say like that. Okay then just so that we're ready to go with this later on, I'm going to add in a button because what do we want to do with meetings? We want to join meetings.

Going to get rid of the max height there layout, make this 100% width.

I'm going to group everything that I want on the left. So group into a row, it pushes the button to the right. So let's go ahead and preview that and hopefully we'll see that meeting that we created. First of all, brilliant. There it is.

No code fans February 29 so let's wrap up that video here. In the next videos we are of course going to cover how we link in with the whereby API and how we can create meetings and how we can join meetings all within our bubble app. And of course registering, logging in users privacy rules, that all to come. If you're learning bubble and you're still watching this, then do subscribe, do go to our website, planetnoco.com because we've got hundreds of bubble tutorial videos just like this one. So if you're learning bubble, there is no better way to do it than to dive into our vast database of bubble tutorials.

Latest videos

menu