Integrate live audio into Webflow

Hi there! 

We're excited to see you're about to take your first step towards transforming your website into an interactive, live-audio empire. This short tutorial post will explain in detail how to implement our audio rooms inside websites built with Webflow. At the end you will also find a video, in which our team member Sara demonstrates the implementation process. So, let's do this! 


Setting up the audio room

Prior to completing the following steps, make sure you have signed up to the Angle Dashboard and created the room you'd like to embed. You can check out how to do this here.

In your Audio Room tab, you can find an embed code and URL for every room that you create, by hovering over the room info. Clicking on this button reveals an iframe, composed of: a div block element, a script that loads the required Angle code, and a script snippet defining the properties of what you’re embedding, such as the room ID, or height dimensions of the room, etc.

All you need to do is “copy” the code here, and you’re ready to put it inside your website or app.

Embedding audio inside your Webflow website

  1. Open your website in the Webflow editor, and identify where you'd like to place the audio room.
  2. Choose a container for your audio room - e.g. select a div block.
  3. In the "Add elements" panel on the left, scroll down and select add "Embed" element.
  4. Paste the embed code of the audio room that you copied from the dashboard inside the Embed Element pop-up.
  5. Save & Publish.

  Voilà!

See this flow in practice

<- Academy