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.

1. Create a Plain Text field in your CMS Collection for each unique identifier
2. Fill in your fields with the unique identifier content
3. Add the embed code to your Collection Page, or Collection List
4. Dynamically populate the track ID with the plain text field

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.

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.

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

Add the embed code to your Collection Page, or Collection List

Dynamic embeds only work with CMS content, so you need to place them in a Collection Page or a Collection 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.

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.

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.

Dynamically populate the track ID with the plain text field

For Webflow to display a different song for each item in the Collection 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.

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.