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.
Unlock video conferencing magic: Learn how to seamlessly integrate Whereby's embedded API with Bubble for instant meetings!
No-code wizardry revealed: Discover how to create a dynamic meeting page that automatically loads user-specific data from your Bubble database.
Transform your app with one-click video calls: Master the art of embedding Whereby's iframe for a professional, seamless user experience.
Creating a Video Conferencing App with Whereby API and Bubble
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.io
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 planetnocode.com. There's a link down in the description and it's a fantastic resource for learning Bubble. I personally have recorded hundreds of Bubble tutorial videos just like this one.
Setting Up the Meeting Page
So let's jump right in here. 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 and I'll do that by creating a page and saying "meeting". I'm going to just clone the index page. Let's delete the repeating group and that button. So that I can tell a difference when I'm debugging, I'm just going to write in here "live meeting". Make that a little bit wider, even wider than that. Let's just say 50%.
Configuring the Meeting Page
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. Bubble is an amazing no-code web app development platform. We don't need to worry about unique IDs; Bubble takes care of it. We can do that by going on to the page and saying the type of content and setting it to "meeting".
Setting Up Navigation
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 of the button that I just clicked.
Displaying Meeting Data
So we say current cell's meeting. That 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's 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.
Testing the Navigation
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 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. 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.
Adding Video Conferencing Features
We're missing a key bit here, which is where we're not actually showing 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. I'm going to copy the iframe code, go back into my editor, and go on to our meeting page.
Implementing the Whereby Iframe
I'm gonna add in an 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 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 and current page's meeting URL.
Adjusting the Iframe Size
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. And so now if I click join, we have got a slightly odd thing going on here. But we can see that something has worked because it has embedded something from Whereby. But it's way too small. So let's go back to 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.
Styling the Iframe
Otherwise, I'm gonna add a bit of extra code in here. 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% so I 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.
Final Adjustments and Testing
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. 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.
Conclusion and Next Steps
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 now, 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 app. So see you in the next video.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
![](https://cdn.prod.website-files.com/665906e27d14bdd3c329e392/66c49b98fad51f4cba2f57b9_Planet%20No%20Code%20Logo%2023.png)
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders