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 apps built with Bubble.io. 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 Bubble.io app

1. Go to a location inside your app where you’d like to embed the room.
2. Add an HTML block and paste in the audio room embed code from the dashboard.
3. You should now see the room in preview mode.
4. Save and Publish.
5. In case you're using Chrome, and the audio room does not appear in 'Preview', try closing the app builder tab, and refreshing the preview page.

  Voilà!

See this flow in practice