Custom code in the Webflow CMS
Learn how to add custom code inside the Webflow CMS. We’ll walk through embedding custom HTML in a CMS rich text field, using Code Embed elements on Collection page templates, and adding dynamic embeds inside Collection lists. You’ll also see how to connect CMS fields to your code so each Collection item displays unique content.
Video transcript
The Code Embed element lets you add custom HTML, CSS, or JavaScript directly to a specific spot in your Webflow layout — right on the canvas. It's different from adding code in Page Settings or Site Settings because it lets you place code inline with your design, not just in the head or footer.
To use it, drag a Code Embed from the Add panel onto your canvas, just like any other element. Then click the element to open the code editor and paste or type your code. When you're done, click Save & Close and you'll see a placeholder in the Designer. The code itself renders when you preview or publish the site.
Code Embeds are great for third-party widgets — things like a scheduling tool, a social feed, a map embed, or any snippet a service gives you to paste into your page. They're also useful for small bits of JavaScript that need to run in a specific part of the page, not globally.
A few things to keep in mind. The code inside a Code Embed element won't be visible or interactive in the Designer — you'll just see a placeholder box. Always preview or publish to see it working. Also, Code Embeds are available on paid Webflow site plans, not on the free plan.
That's the Code Embed element — a flexible way to drop custom code exactly where you need it in your layout.
.jpg)