Do not index
Do not index
Welcome to Part 2 of building a live-streaming app with Bubble! If you haven’t completed Part 1, start there before continuing.
This section covers designing the app’s header, creating sign-up and login workflows, and setting up the basic stream creation form. If you’re mainly interested in the plugin-related steps, jump to the sections on creating the stream form and stream workflow.
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. Create the app header
First, create a simple home page where users can sign up and log in. You’ll use the default index page and Bubble’s built-in components.
Go to the Design tab for the index page. Click on the page and set the layout to Column.
Under Components, install any plugins needed for this setup.
Drag a Header component onto the page.
Rename it to YouStreamly, and remove other header elements as needed.
Since this header will appear across multiple pages in your app, converting it to a reusable element will save time and ensure consistency. Right-click on the header, select Convert to a reusable element, and name it header. Now, you can easily add this header to any page without rebuilding it each time
Set the default width for the reusable header to 1200 in Layout.
Create a conditional for the Sign Up button to change to Log Out when a user is logged in.
In the appearance tab select Edit workflow.
Create a workflow that redirects the user to home when a user is logged out
Duplicate the workflow and log the user out if the user is logged in
Add a final workflow to go home when Group logo is clicked
Back in the index page remove the
Group header and replace it with the reusable element header.
2. Design the home page
Now, set up the home page for users to create accounts, log in, and create streams.
Sign up form
Drag the sign-up component onto the page.
Customize the sign up page as follows:
- Title: Start streaming with YouStreamly
- Description: Create an account and start live streaming to YouTube. Perfect for creators who want a lightweight way to share live sessions, Q&As, and interviews with viewers.
In the layout tab select collapse when hidden
In the Conditional tab, make the sign-up form hidden when a user is logged in.
Log in Form
Add a Log In component below the sign-up form and customize as follows:
- Title: Start streaming with YouStreamly
- Description: Log into your account to start live streaming to YouTube.
In the Layout tab for
Group log in check collapse when hidden and uncheck this element is visible on page load. 
In the conditional tab add a condition that when the current user is logged in the element isn’t visible
Stream creation form
To add a form for stream details, duplicate the Sign-Up form and make the following adjustments:
- Rename the duplicated group to Group Stream.
- Update the title to Create Stream and add a subtitle: Enter your stream details.
- Modify the input fields as follows:
- Change the Email input to Stream Name. Set the placeholder to Stream Name and format to
text. - Change Password to RTMP URL, with a placeholder of YouTube RTMP URL. Set the format to
text. - Update the Confirm Password field to Stream Key and keep it formatted as a password field.
- Update the button text to Create and remove any “Already have an account?” text.
In the Layout tab, uncheck This element is visible on page load so it stays hidden initially.
In the Conditional tab, set the form to become visible when the current user is logged in
3. Workflows for signing up, logging in and creating the stream
Sign up Workflow
Select the Sign Up button, go to Edit Workflow, and create a workflow to register a user when clicked.
Replace the “Already have an account?” link with text
Add a workflow to hide the sign-up group and display the login group when this text is clicked
Log in
Select the Log In button, edit the workflow to log in a user, and add a step to reset relevant inputs
For Forgot Password?, set up a workflow to send a password reset email when clicked.
Round out the workflow by setting up Reset relevant input to ensure clean data entry.
Create stream workflow
This is where the Daily Video Conferencing Plugin comes into play!
Select the Create Stream button and create a workflow to set up a streaming session. In the workflow, use Daily - create a room followed by Daily - create a meeting token. Ensure the owner token is set to “Yes” to allow room owners to stream.
Save the stream information to your database:
- Name = Input stream name’s value
- Owner Token = Result of Step 2’s token
- Room ID = Result of Step 1’s ID
- Room Name = Result of Step 1’s room name
- Room URL = Result of Step 1’s URL
- RTMP URL = Input RTMP URL’s value
- Stream Key = Input stream key’s value
- User = Current user
Add an action to navigate users to a backstage page where they can join and view the stream. Create a new page called backstage, leaving the clone form field blank.
Send the stream data to the backstage page and set the content type to stream.
Wrap-Up
Nice job! 🎉 You’ve created the home page and stream workflows to bring your app to life. Now let’s move to Part 3: Building the Backstage to create a seamless experience for going live.
.png?table=block&id=9ba33ac6-8e12-48f6-b980-4333b612ec56&cache=v2)
