Code Embed element
Learn how to use Webflow’s Code Embed element to place custom HTML, iframe embeds, or small scripts and styles directly into your page layout. We’ll cover what the Code Embed element is, how it works within a layout, and how to add and preview custom code. We’ll also look at common issues and how to fix them.
Video transcript
The Code Embed element in Webflow lets you insert custom HTML, CSS, or JavaScript anywhere on your page. In this video we'll quickly walk through what it can do and how to add custom code in the CMS.
Custom code in the CMS lets you embed code at the collection level so it outputs on every CMS item page. To add it, go to your CMS collection settings and look for the custom code section. This works the same as page-level custom code — you can add code to the head tag or before the body closes, and it'll apply to every page generated by that collection.
This is useful for things like: adding structured data markup (like JSON-LD for articles or products), including a specific tracking script only for collection pages, or loading a third-party library that's only needed for those pages.
Just keep in mind that this code runs on every single page in that collection. So if you only need it for specific items, you'd want to use a different approach — like a switch field to conditionally embed different content.
That's a quick look at how to use custom code within the Webflow CMS.
