How to use Dynamic Embeds on your Webflow site

With Dynamic Embeds, you can use your CMS Collection fields to dynamically update embedded code. Which lets you create dynamic:

• Ecommerce storefronts (with third-party tools like Shopify)
• Click-to-tweet buttons (with Twitter)
• Podcast and music sites (with SoundCloud)
• Event sites (with Eventbrite)

And much, much more. Let’s see how.

The ingredients of a Dynamic Embed

Every Dynamic Embed is a little different, but they all require the following things:

1. The third-party embed code
2. A unique identifier (or two) for the thing you want to dynamically serve (be it a tweet, Shopify product, or Eventbrite event)
3. A Webflow CMS Collection with a Plain Text field so you can enter that unique identifier

So, for a click-to-tweet button, we’d need:

1. Twitter’s embed code
2. The text of the tweets we want people to click to tweet
3. A Collection with a Plain Text field for the tweet text

1. Create one 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. Click here to see this example in Webflow.

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.

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

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 our collection of SoundCloud songs in a Dynamic List.

With our Dynamic List added and bound to our Songs collection, let’s now add an Embed component to the Dynamic List. To start, we’ll paste all of the embed code for the SoundCloud track into the Embed component.

Notice that, at this stage, the Dynamic List 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. Replace the unique identifiers within the embed code with the fields created in Step 1

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.

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