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

No Code Video Conferencing App with WHEREBY - Part 2

In part two of our series, we explore using Bubble.io and the whereby embedded API to create a seamless no-code video conferencing app in record time. With step-by-step guidance and tips on authentication, creating meetings, and saving meeting data, this tutorial sets you up for success in building your own app.

Whereby website: https://whereby.com/information/embedded

Welcome back to part two

Welcome back to part two of our mini series where we are taking a deep dive into using the whereby embedded API with bubble to create a no code video conferencing app. And we're probably going to end up having created this whole app in less than an hour. So sit tight. Let's dive into part two where we are going to be getting into using the whereby API and how we connect that with bubble because that how we'll have our bubble users creating a new meeting, getting the details back of that meeting and embedding that meeting into our bubble app. So once you've signed up for the whereby embedded API access, you can do so through their website.

Open up the API documentation

You'll be greeted at a screen that looks like this. And you'll also want to open up the API documentation as that will be the other screen that I'm referring to because we've got to find that way of having our bubble app communicate with the whereby API. So let's go right back into our bubble app and we've got this very simple layout for displaying and creating meetings. I now go into plugins and add a new plugin and I go for the API connector, which is by bubble and the API connector, as you can see, it's almost got a million apps using it. The API connector is immensely powerful because it will allow you to in most cases connect your bubble app to any web service out there with some limitations.

Add an API for whereby embedded

But you can do so many things with it. You can web can. Well, you just got to go and check out our other videos for all the things that you can do with the API connector. So let's add in an API and this is going to be called whereby embedded. And now if I go to the whereby API documentation, I want to read about how I authenticate.

Generate an API key

So it says that I have to use the API key and bearer. So I need an API key. If I go into my whereby count, I believe that this is under configuration API key. Generate an API key. Now API keys, you want to keep these secure.

Authenticate the API

I will be deleting this one as soon as I've recorded these videos because this is like a password to your account. If someone were to get hold of this key, they could effectively, they're using your account as if they're you. If you are paying for something, they've got access to that thing you've paid for. So you'll want to limit that. Let's just name this PNC test and click save and then copy it close, go back into bubble.

And I think I need to authenticate it like this so we have authorization bearer. I'll do it lowercase just in case that's important. And then I paste in the API key. Now we're going to find out in a minute or so whether that works. If it doesn't, I'll work out live on this video.

Make API calls

Right. We now have a number of API calls that we can make and in fact they're all listed down here. So we can do things with recordings, we can get insights on rooms. But we want to do the most basic thing first, which is we want to create a meeting. So I'm going to copy this endpoint here and paste it.

Now, it's a post type of request because if I go back to documentation, you can see it says post there. Generally, if you're creating something or you're passing data, it's post. And then we can see that the body needs to look like this. Now there are some fields here that are required and some fields that are not. You can dive into that by going into schema and then object and it's going to tell you which ones are required.

And actually the only one that is required is the end date. So I'm going to keep it really simple. Copy this, go into bubble and paste all of that code here. Now yes, this is a no code video. I'm going to make sure that everything is explained.

But technically this is Json. If you want to know what type of code it is, it's Json. And I only want to keep the end date, so I'm actually going to delete everything in here. So I've deleted, there's no comma after it and I've made sure that the curly brackets, curly braces are in place. And then the end date, I want to make this dynamic because I want to be able to insert data into it depending on when the user created it.

For example, if a user creates a meeting, I can set an end date to be an hour after the start of that meeting. Now, looking at, I've only just learned this, but looking at the documentation here, start date is depreciated, meaning that it's no longer a valid or recognized value. Basically, when you create a meeting, your meeting will be accessible from the moment you create it to the end date, but you have to supply an end date. So let's go back in here and I'm going to copy this end date here to my clipboard. And I'm going to put in triangle brackets, end date, and close triangle brackets.

And I'm using triangle brackets because bubble guides me here that if I want to insert dynamic data into the code I use triangle brackets. I'm then going to paste it in there because I still want to run this test. So that is actually depending on the time zone in the future. Basically it's today's date, so I want to make sure that I've got something workable. So I'm going to say tomorrow and then let's initialize the call.

Authenticate the API

And initializing the call is our way of testing everything that I've built so far. So we'll either get an error or we'll get a success message with some data about the meeting. So let's try it.

Correcting API authorization error

Okay, authorization required. Okay, I've had to do a little bit of digging around and I've worked out what I had done wrong, which is that it should be private key in header authorization and bearer does need to be capitalized. There we go. Very easy mistake to make. So let me show you how that works now.

So everything should now authenticate and I'm going to initialize the call. And there we go. We get a success message back and we get data about the room, such as the room name and the room URL and the meeting id, end time start time. Okay, this is also teaching bobble what data is returned. So I'm actually going to correct this and say that this is a date and the rest is text.

Fine. Click save. Now my call is ready, but I'm going to make a few updates here before we put it into a workflow, which is I'm going to rename it to create meeting and I'm going to change the use as to action. This means that it can be used as a workflow action, which is exactly what I want to do with it. So let's go back into design and we can add this in to our create workflow.

That's the save workflow. Here we go. So when the save button is clicked at the moment we don't make any communications to whereby, but we need to do that. So I'm going to add in the create meeting. I'm going to put this right at the start and then the end date.

Now I've done some digging into this and it says the different formats. Basically there are some pretty consistent ways that dates are expressed over APIs, but particularly with dates, it's worth looking in the documentation to find. How does that service want to receive the date? So it says uses UTC. If end date lacks time zone, it will be interpreted as a UTC date.

Okay, bear all of that in mind and it wants us to print them basically like that. Okay, we can work that. I might have to flick backwards and forwards with it. So the end date is going to be my date picker value plus an hour. And now I've got to format it in a way that it expects.

Does it actually accept Unix? Let's go back. I don't think it does, no. So Unix is a way of expressing a date as either seconds or milliseconds from, I think a date in 1970, which is quite a standardized way of doing it. But I basically have to format it like this.

So it's going to be year, month, day, space, hour, minute. Let's just go with that. So let's go back into here and I say formatted as now. Bubble gives you all these presets, but bubble doesn't. Oh, is it simplified extended ISO?

I think it might be, yeah, there we go. Let's try that. Let's see how well that works. We'll get an error if it doesn't work and we'll come back to it if it doesn't work. So this will create the meeting at step one.

That's when the data gets sent to the whereby API and the magic happens on their end. But we need to be able to retrieve some data from that in order for our users to be able to join the meeting. So we need to save some of what is returned from step one. So we've got at least URL.

Save data from step one

So I go results of step ones room URL. I'm also going to save the room name and the meeting id as well. So add in a field room name again, results step one. This is why I put the create meeting action before. That's confusing.

This is why I put the whereby API request before my bubble database create meeting action because I want to save what comes out of step one into step two. So we say room name and then what was the last bit? Meeting id. I'm not sure exactly which bits I need, but that will all become apparent. Meeting Id.

Meeting id. Okay, perfect. Let's go back into here and go on to rooms because now we should see that. Yeah, these are the ones that I've created in the course of testing. So let's go back into bubble and I'll demonstrate how we can create a meeting and it will appear here.

Create a meeting in the app

So we should end up with three. Let's go back into our app and we'll create a meeting. And I'll call this one amazingbubble IO fans. And let's put this in to march, select a time save. Okay, now that only took a fraction longer, but that's because we're waiting to send data to whereby and to get data back.

So first thing I'm going to do is check in my bubble app that we now have got these bits of data. So this is the one that I just created and you can see that it's got the meeting id. There's something really buggy going on with bubbles tables. When I click on it, ignore that, but I won't click on it. So we got the URL, we've got the room name, we've got the meeting id.

That's all saved. Perfect. But has it appeared in whereby? Well, it should have. Let's go back to here and refresh.

Latest videos

menu