All courses Custom code in Webflow
In the Webflow CMS
In the Webflow CMS
Working with custom code in CMS-driven content
In the Webflow CMS
Working with custom code in CMS-driven content
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.

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 when added to the code, CMS fields determine what content is passed into it. Each CMS item uses the same layout, but the embedded content can change per item.

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.

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.
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.
1
Getting started
Getting started
Coming soon
1
Background & preview
Coming soon
1
Where you can add custom code 4:00
Where you can add custom code
Coming soon
2
Adding custom code
Adding custom code
Coming soon
2
The Code Embed element
Coming soon
2
At the layout level (Code Embed element) 3:00
At the layout level (Code Embed element)
Coming soon
2
Page & site level code
Coming soon
2
Page-level code
Coming soon
2
Site-level code
Coming soon
2
Adding custom code
Custom code in the Webflow CMS 3:01
Custom code in the Webflow CMS
Coming soon
2
In the Webflow CMS
Coming soon
3
Managing custom code
Managing custom code
Coming soon
3
Previewing, testing, & troubleshooting 5:00
Previewing, testing, & troubleshooting
Coming soon
3
Best practices for maintainable code 4:00
Best practices for maintainable code
Coming soon
4
Wrap up
Wrap up
Coming soon
4
Try it: use the Code Embed element 4:00
Try it: use the Code Embed element
Coming soon
4
Wrap up
Try it: add page-level code 4:00
Try it: add page-level code
Coming soon
4
Wrap up
Try it: add site-level code 4:00
Try it: add site-level code
Coming soon
4
Additional resources
Coming soon
Course progress
0%
Assessment
Test your knowledge
Up next
Previewing, testing, & troubleshooting
Make sure your custom code runs where it should (and nowhere else)
Continue to next lesson → Complete course ✓
