How custom code works with CMS content

When you’re working with the Webflow CMS, custom code often shifts from being page-based to being content-driven. Instead of adding code to a single page or layout, you define where the code lives and let CMS content control what changes from item to item.

The CMS itself doesn’t run code. It simply provides data. Your layout determines where an embed appears, and CMS fields decide what content gets passed into it.

This setup lets you reuse the same layout across many pages while the embedded content updates automatically for each CMS item.

Where custom code can appear in CMS content

There are a few common ways custom code shows up in CMS-driven experiences, depending on how much flexibility you need.

Inside rich text fields

Custom code can live inside rich text fields, such as blog posts or long-form content. In this case, the embed sits alongside text, images, and other content, and appears exactly where it’s placed in the rich text.

IMG [CMS rich text editor showing an HTML embed placed inline between text content.]

Inside a Collection Page template

Custom code can also live in the layout of a Collection Page template. Here, the embed is part of the page structure, and CMS fields determine what content is passed into it. Each CMS item uses the same layout, but the embedded content can change per item.

IMG [Collection Page template with a Code Embed element connected to a CMS field in Webflow.]

Inside a Collection List

You can place custom code inside a Collection List to repeat an embed across multiple CMS items on the same page. This is useful when you want to display multiple pieces of embedded content at once, such as a list of videos, events, or profiles.

IMG [Collection List in Webflow showing the same embedded content repeated for multiple CMS items.]

Static embeds vs dynamic embeds

When using custom code with the Webflow CMS, a key distinction is whether an embed stays the same for every item or changes based on CMS content. This affects both how the embed is added and how it behaves across your site.

Static embeds

Static embeds display the same embedded content for every CMS item. They’re typically added directly to a Collection Page template or inside a Collection List, where the layout repeats but the embed itself does not change.

This works well when the embed supports the overall experience rather than the content itself, such as:

• A shared signup form at the end of every blog post
• A promotional banner reused across a collection
• A standard call-to-action widget included on all CMS pages

In these cases, the CMS controls the surrounding content, but the embedded code stays fixed.

Dynamic embeds

Dynamic embeds change based on CMS fields. The embed is usually placed in a Collection Page template or Collection List, and CMS fields are referenced inside the code so each item controls what’s displayed.

This pattern is useful when the embed is part of the content, for example:

• Blog posts that each include a different video
• Team profiles with individual scheduling links
• Event listings with unique maps or registration widgets
• Podcast or music sites with per-episode players

With dynamic embeds, the layout stays consistent, but the CMS data determines what appears inside the embed. This makes it easier to scale content without duplicating code.

IMG [Multiple CMS items using the same layout, each rendering different content based on CMS field values.]

Got it down?

You’ve seen several ways to work with code in Webflow. Let’s move on to previewing, testing, and troubleshooting custom code so you can validate changes before publishing.

‍