🍓 Jam React Component
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.
Install the Jam React Component from npm
The Jam React Component lets you embed existing Jam rooms in your React application. You can find jam-react on npm and add it using yarn add:
yarn add jam-reactTo embed a Jam room you only need to know the id of the room and you are good to go. In this example the room id is “room-id”.
Even more interesting perhaps: you can also use the Jam react component to embed rooms that don’t exist yet. Just pick a room id that does not exist yet. This will create a room for this room id on the fly.
Yes, you can create Jam rooms from within your React app just-in-time.
No need to create them upfront, no need to manage them.
Create them whenever you need them.
Customize the room
You can set the name, description and primary color of the room directly from the Jam react component using the newRoom attribute.
Here is an example for embedding three rooms with the ids new-jam-room-01, new-jam-room-02 and new-jam-room-03 with their own name, description and color.
note: a Jam room id is at least 4 characters long and consists of alphanumeric characters or the minus (“-”) character. “Hello-World-01” and “room-id” are valid room ids. “not_valid” on the other hand is not a valid room id because it contains an underscore (“_”) character.
note: the first person you render the room for will become moderator. If it is important who should become the moderator (e.g. the user who scheduled the room in your app) make sure to lead them to the room first and consider how this makes sense in your user journey.
Troubleshooting and Success
Have trouble with embedding Jam rooms using React?
Successfully embedded 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.
