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
<a href="https://twitter.com/share" class="twitter-share-button"
<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 "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: