Introducing Daily's webinar series: Building an open source webinar app with Daily's prebuilt UI

This is the first post in our series on how to build your own webinar platform using Daily Prebuilt and a custom chat widget.

As more services move online, Daily has noticed an influx of startups needing to find more efficient ways to connect with customers. As is often the case with growing companies, the number of potential customers looking to learn more about a product will eventually reach a threshold where providing one-on-one calls no longer scales well. This creates an issue where companies want to connect with interested customers, but are no longer able to with every new lead.

One solution for managing a growing amount of inbound interest is to host a webinar. Webinars—online video calls that have one or more hosts presenting to attendees—provide a great solution for engaging with potential new customers. They allow you to introduce attendees to your product and clarify commonly asked questions, all while still allowing for personalized conversations.

Realizing the need to host webinars was increasing, we recently updated our prebuilt UI to help customers quickly build their own webinar apps.

Everybody gets a webinar

Before our recent Daily properties additions (showLocalVideo and showParticipantsBar), you could build a webinar app using our fully-customizable but more time-intensive call object mode. Call object mode is a useful solution when you know you need to customize your UI beyond what Daily’s out-of-the-box UI looks like. However, if you're happy with the default video call UI (and we’ll be honest, we are!) then using Daily’s prebuilt UI will save time to focus on the rest of your webinar app.

Introducing Daily’s new webinar blog series!

To help a broader range of customers create their own webinar experiences, we’ve decided to speed up the process even more by providing a step-by-step tutorial series on how to build a webinar app yourself. To accomplish this, we'll use Daily’s prebuilt UI and React (create-react-app to be specific).

Below we’ll look at the first step in any coding project: defining our feature requirements. Once we have our requirements, each tutorial to follow will build upon this foundation and focus on a new feature for the webinar app. This will include features like authenticating the admin, tailoring a chat experience for a webinar, and more.

What webinars are and webinaren’t

We know we want to build a webinar but what exactly does that mean? Let’s start by determining our MVP features.

We will need the webinar app to:

1. Differentiate between two types of participants: admins and attendees using only Daily’s meeting tokens.
2. Provide a simple form for attendees to enter a chat username. Admins will have their username set when the meeting token is created but since attendees won’t use a meeting token to join, we’ll have to ask them to fill out their name.
3. Include a chat box. Attendees will be able to message admins, and admin can message individual attendees or all attendees at once. We’ll use Daily’s sendAppMessage method for this.
4. Allow for various Daily rooms to be used for the webinar. We’ll need to retrieve existing Daily room information without writing any backend code.
5. Customize our Daily room settings to only turn on video and microphones for our admins. That means attendees will be able to watch the presentation and use the chat, but won’t have their video or microphones on. We’ll accomplish this with Daily’s owner_only_broadcast room settings and the new showLocalVideo and showParticipantsBar call properties.

Bonus: we’ll also create a single-form admin app to simplify generating our admin’s meeting tokens even more!

As a first step, make sure to sign up for a free Daily account if you haven’t already. Once you have a Daily account, you’re ready to get started!

Hostess with the mostest

Now that we know exactly what we’ll be building, we’re ready to become webinar experts! Our next step is to create a basic React app with a Daily call embedded in the main view.

If you’re looking to get more familiar with some of the features we’ve discussed here, check out our existing blog posts on building a chat interface a few different ways.

You can also get a head start on managing meeting tokens and rooms by deploying a back-end service with Glitch or Netlify.