Do not index
Do not index
Welcome to the final installment of building a live-streaming app with Bubble and the free Daily Video Conferencing & Chat plugin! If you haven’t completed Part 1 and Part 2, start there first.
In this part, you’ll design the backstage page where users can join and start their YouTube stream, and set up workflows for broadcasting live.
While the guide walks you through each step, you can also explore a finished version in the sample editor. Please note that, for security, sign-ups are disabled and API keys have been removed.
1. Design the backstage page
Let’s start by setting up the backstage page, where users will join the stream. In the backstage page settings, change the layout to Column.
Add a Marketing Component to the page. Remove any images and buttons, and modify the text fields as follows:
- Main Text: Backstage for [insert dynamic data: Current stream’s name]
- Subtext: Step into the spotlight! 🌟 You’re on camera, and your conversation will stream live to YouTube. Here’s how to get started:
Update the text of the three cards within the component.
- Card 1: 🎬 Join the Room Your conversation will be broadcast on YouTube. Invite viewers to tune in live.
- Card 2: 🔗 Share the Link Share this link with anyone you want to invite. Link: [insert dynamic data: Current page URL]
- Card 3: 📺 Watch on YouTube Your conversation is live on YouTube. Invite viewers to tune in!
Go to Settings, select Expose HTML Element ID, and check this option. Enabling this option will later enable you to place the video call in a custom element anywhere on the page.
Back in the Design tab, add a Group to your page. Name it Group Video and set the ID Attribute to “video.”
In the Layout tab, adjust the settings:
- Check Collapse when hidden.
- Uncheck Make this element fixed-width.
- Set Min Width to 274px and Max Width to 960px.
- Uncheck Fit width to content and Fit height to content.
- Set Min Height to 750px and leave Max Height blank.
Add the Events Element to the page to listen for events when the user joins the room.
Add the header to the top of the page
2. Set Up Backstage Workflows
Page Load Workflow: Add a workflow to join the room upon page load.
- Use Daily - join room action.
- Set URL to
Current page’s stream’s room URL.
- For Room Style, use Custom Position.
- Set Meeting Token to
Current page’s stream’s owner token.
- Enter “video” as the Element ID.
- Add an action to start listening to events.
Add an event A Daily events joined-meeting
Add a condition so that the event triggers when “Curren user is Current page’s stream’s user”
When the condition is met, add the action Daily - Start Live Stream to begin streaming.
- Set the RTMP URL to the stream URL, followed by a /, and enter the stream key.
Add a final workflow that will redirect to the index page when the page is loaded and the current page’s stream is empty. This will prevent the page from loading when there isn’t a stream
Try it out
Click Preview to test the app.
In YouTube, go to Go Live and open the Live Streaming Dashboard.
Copy your Stream URL and Stream Key.
Paste the Stream URL and Stream Key into the form.
Join the app, and you’re live! Share the backstage link for other people to join you as well
Wrap-Up
Fantastic work! 🎉 You’ve completed the final steps to building a YouTube live-streaming app in Bubble. Your app is now set to let hosts and guests join, manage, and broadcast live events directly to their audience.
That’s a wrap—your live-streaming app is ready to go live!
.png?table=block&id=9ba33ac6-8e12-48f6-b980-4333b612ec56&cache=v2)
