Use dynamic data in custom code embeds

Updated

Reference CMS fields, component props, locale settings, and page settings directly in Code Embed elements.

Code Embeds let you add custom HTML, CSS, and JavaScript anywhere on your site. With dynamic bindings, you can make that code smarter — pulling in values from your CMS, component props, locale settings, and page settings so your embeds adapt automatically, no manual updates needed.

Supported reference sources

You can insert references to dynamic data directly into your code using the connect menu. Webflow replaces those references with the actual values when the page loads. You can bind to:

  • CMS Collection fields — pulls in field values from the Collection the embed is placed in
  • Component props — references prop values set on each component instance
  • Locale data — pulls from locale-specific settings when localization is enabled
  • Page settings — references metadata like page name or slug

Add a reference in a code embed

To connect CMS Collection fields, the Code Embed must be in a Collection list or on a Collection page. To connect to component props, the Code Embed must be in a component.

To connect dynamic data in a code embed:

  1. Select your Code Embed element on the canvas
  2. Click Edit code in the settings panel
  3. Place your cursor where you want to insert a reference
  4. Click the purple dot that appears on that line to open the connect menu
  5. Choose the field or prop you want to reference
  6. Click Save & Close

The binding appears inline in your code as a placeholder token. When the page renders, Webflow substitutes the token with the actual value.

Note

Dynamic embeds using Ecommerce fields won't update based on the variant a visitor selects. For example, if you use a dynamic embed to display a product price, that price won't change when a visitor switches to a different variant.

Use a Code prop to swap entire embeds

A Code prop lets you connect an entire Code Embed to a prop, so you can swap out the full embed code on a per-instance basis. This is useful for things like SVG icons, third-party widgets, or any custom markup that varies between instances.

To connect a Code Embed to a Code prop:

  1. Edit the component
  2. Select the Code Embed element
  3. In the settings panel, click the purple dot next to the desired field
  4. Choose an existing Code prop or create a new one
  5. On each component instance, set the Code prop value to the embed code you want that instance to display

Related articles