Use Collection fields in custom code embeds

With Dynamic Embeds, you can use your CMS Collection fields to dynamically update embedded code.

cms-dynamic-content
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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>
  1. Add an Embed element in a Collection list or on a Collection page
  2. Paste in the code
  3. Select the unique identifier "Tweet Text"
  4. Click Add Field
  5. Select "Tweet Text"
A HTML embed code editor is open and filled out. The + Add field button on the right side of the editor is highlighted. The drop down text menu "Tweet Text" is also highlighted on the editor.
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:

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?