Add 🍓 Jam to Webflow
Here is how you can add a Clubhouse or Twitter Spaces -like audio room to your Webflow, for free, in just 5 minutes. First: start a room on Jam.
Copy your iFrame Embed Tag
You can find the embed code for your Jam room in the “Room Settings”.
note: to access the “Room Settings” you need to be a room moderator
Your iframe embed tag will look similar to this:
<iframe src=”https://jam.systems/room-id" allow=”microphone *;” width=”420" height=”600">
Add the iFrame Embed Tag to Webflow
Now you can add the embed tag to your Webflow project.
Go to the left Sidebar:
“Add” => “Elements” => “Components” => “Embed”
This will open the HTML Embed Code Editor. Paste the embed code tag from your Jam room settings (see above) into the editor on Webflow.
You can adjust the width and height of the tag to adjust the size of the room.
Now click “Save & Close” and that’s it!
note: allow=”microphone *;” is needed so that the iframe can ask users for the permission to use the microphone. The syntax looks a bit unusual since there is an asterisk (*) and a semicolon (;) in there, they are not typos.
note: make sure your website is served via https and that the src attribute in your iframe embed code snippet also uses https as the protocol for the address of your Jam room. Otherwise embedding or microphone access might not work depending on the browsers and settings your users have.
Troubleshooting and Success
Have trouble adding your Jam room to Webflow?
Successfully added a Jam room and want to let us know?
Let us know!
Join the Jam community on our discord server or join our weekly Jam Jam.
