Dynamically embed SoundCloud audio with Webflow CMS

May 19, 2017

Let's look at an example of dynamic embeds in action, using SoundCloud's track embed code as an example. In the example, we'll be displaying a unique track on each template page for a song review Collection. Below is an image of the finished product we'll be working on, which you can see on the live site and in the Designer at this preview link.

Example of dynamically populated SoundCloud embed.

1. Create a Plain Text field in your CMS Collection for each unique identifier

You’ll use these Plain Text fields to add a reference to the specific item you want to embed in your page via the third-party tool’s embed code.

These identifiers differ from embed to embed, so it’s important to investigate what they are for each third-party tool.

For example, the Track ID is the unique identifier for SoundCloud. For Shopify, it’s your Product ID and Product Label. For Eventbrite, it’s the unique Event ID.

In this example, we’ll create a Plain Text field for the Track ID so we can embed a SoundCloud media player. 

The structure of the Collection for this example.
The structure of this Collection, with the Plain Text field for the SoundCloud track ID.

2. Fill in your fields with the unique identifier content

Since we’re using SoundCloud’s embed for this example, we need to find and copy the Track ID for the song we want to embed on our site.

Pulling the embed code from SoundCloud.
The SoundCloud embed code is always the same, except for this unique track ID, which changes according to the song.

Once we have it, we’ll paste the text inside the Collection Item field we created in step 1.

The Plain Text field we will use to pase the track ID.
Find the unique track ID, then paste it into your SoundCloud embed

3. Add the embed code to your Collection Template page, or Dynamic List

Dynamic embeds only work with dynamic content, so you need to place them in a Collection Template page or a Dynamic List.

For this example, let’s display a unique SoundCloud embed song for each song review template page. To do this, we'll simply paste in a full embed code on the page. First, we drag on an empty HTML embed from the Add panel.

Add an empty HTML embed to your template page.
First, add an empty HTML embed to your template page.

Next, we'll paste an entire embed code from a SoundCloud track in the embed. It can be any song — in the next step, we'll replace the changing parameter with the Plain text field we created in step 1.

Paste in the full SoundCloud embed.
Paste a SoundCloud embed in the HTML embed. It's ok that the track is wrong at first! We'll replace the track ID in the next step.

Notice that, at this stage, the template page displays the same song for each item. Why? Because we haven’t replaced the unique identifier (the Track ID) in the embed code with the field we created in our Collection.

4. Dynamically populate the track ID with the plain text field

For Webflow to display a different song for each item in the Dynamic List, you need to replace the unique identifier in the embed code with the right field from your Collection.

So we’ll return to the embed code, highlight the text we want to replace, and click Add Field. Then, we’ll pick the Track ID field we created in Step 1.

Replace the changing parameter with any plain text field.
Highlight the changing parameter, then replace with the field you created in Step 1.

Now, when we preview the page, we’ll see that each list item displays a unique song.

To take a closer look, check out the live example site or preview the site in the Designer.