Welcome to Webflow + kommu Tutorial!

In this tutorial, we'll build a web site which has powerful video chat functionality together. We'll use Webflow; no-code tool that allows you to create web pages without any markups, and use kommu; simple and developer-friendly tool to integrate video chat into a web page.

Throughout this tutorial, you'll learn how to use Webflow and kommu to get:

...without writing any lines of code! How cool isn't it? 😎

<aside> ℹ️ We'll use custom code feature of Webflow, which requires paid plan.

</aside>

1. Create your video chat project on Webflow

First things first, you need to create your memorable first video chat project on Webflow. Follow the steps below in order:

1. Login (or signup) to Webflow from here, then go to the dashboard
2. Click [New Project]
3. Select [Blank Site] template
4. Fill [Site name] as your choice

Now you get the blank editor screen ✨

2. Create and design pages

Secondly, design two pages: Home and Meeting.

Home page

Home is the first page a site visitor will see. Put a form to join (or start) to the video chat here.

1. Click [Add Elements] in the left sidebar

   

2. Drag [Section] and drop it into the body

3. Drag [Container] into the Section

4. Drag [Form Block] into the Container

Now the editor looks like this:

Next, edit the form as the following:

1. Double click Name label and rename it to Room ID

2. Double click the input field next to Room ID, and then edit the followings:

   1. Fill the name with room_id
   2. Select [Plain] text type
   3. Check [Required]

   

3. Double click Email Address label and rename it to Display Name

4. Double click the input field next to Display Name, and then edit the followings:

   1. Fill the name with display_name
   2. Select [Plain] text type
   3. Check [Required]

   

5. Double click the [Submit] button and change the [Button Text] to Start/Join Meeting

6. Click the Form Block, and then click the gear icon on the top of the right sidebar

7. Fill [Action] input with /meeting

   

Home page is now complete! Let's keep going the Meeting page ➡️

Meeting page

Meeting page is the core of your site. Out video chat will be displayed and work here.