Add 🍓 Jam to Shopify

Add a 🍞 Jam audio room to your Shopify web store.

Here is how you can add a Clubhouse or Twitter Spaces -like audio room to your Shopify, 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

Select the text to copy your iframe embed tag from the “Room Settings” menu

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 Shopify

Now you can add the embed tag to your Shopify store.

In this example we have created a new page called “Showroom”.
You can add an iFrame tag to a Shopify page using the “<>” button.

This switches the page to the HTML Edit mode.

make sure the Shopify page editor is in HTML Edit mode (see the “<>” button)

Paste the embed code tag from your Jam room settings (see above) into the editor on Shopfy (note: make sure the editor is in HTML Edit mode).

You can adjust the width and height of the tag to adjust the size of the widget.

Here we have pasted the iFrame embed code into the Shopify page

Now click “Save” and that’s it!

You can now click on “View page” to see if everything worked.

Talk to your customers using a Jam audio room

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.

Troubleshooting and Success

Have trouble adding your Jam room to Shopify?

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.

Resources

• Jam on Twitter
• Jam on Gitlab
• Learn more about embedding iframes and microphone access