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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.