Use Collection fields in custom code embeds

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:

1. Create a Plain text field in your collection for the unique identifier, call it "Tweet text"
2. Grab the code below

<a href="https://twitter.com/share" class="twitter-share-button" 
data-text="TEXT"
data-show-count="false">Tweet</a>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

3. Add an Embed element in a Collection list or on a Collection page
4. Paste in the code
5. Select the unique identifier "TEXT"
6. Click Add Field
7. 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)

‍