With dynamic embeds, you can use your CMS Collection fields to dynamically update embedded code. Which lets you create dynamic social share buttons, ecommerce storefronts, podcast and music sites, event sites, and much, much more.
Ingredients of a dynamic embed
Every dynamic embed is a little different, but they all require the following:
- The third-party embed code with unique identifiers for the thing you want to dynamically serve (be it a tweet, Shopify product, or Eventbrite event)
- A Webflow CMS Collection with a Plain Text field so you can enter that unique identifier
Creating a dynamic embed
Let's create a click-to-tweet button. To create the dynamic embed:
- Create a Plain text field in your collection for the unique identifier, call it "Tweet text"
- Grab the code below
data-text="TEXT"
data-show-count="false">Tweet
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
- Add an Embed element in a Collection list or on a Collection page
- Paste in the code
- Select the unique identifier "Tweet Text"
- Click Add Field
- Select "Tweet Text"
See a detailed tutorial on how to create a more custom click-to-tweet button.
Check out these tutorials and see how you can use dynamic embeds to set:
- Ecommerce storefronts (with third-party tools like Shopify)
- Podcast and music sites (with SoundCloud)
- Event sites (with Eventbrite)
Known limitation: Dynamic embeds using Ecommerce fields will not update based on the variant selected. For example, you might use a dynamic embed to display the price of your product. If a visitor to your site selects a product variant with a different price, that change in price will not be update via the dynamic embed, and the customer will see no change in price.
