Custom code in the Webflow CMS

Let’s add custom code in the Webflow CMS. And we’ll do that in a few ways: inside a rich text field, inside a Collection page template, and inside a Collection list. Here, we have a blog for a fictional restaurant design site in the CMS. Say we want to add a video inside the body of the blog. First, we’ll add an HTML embed within the rich text field. Then, paste in the iframe embed code we got from Vimeo. There are some things we’ve adjusted within the code, like making it autoplay, but that’s up to you. Save and close, then enter Preview mode. We’ll toggle Enable custom code, and there’s the video playing within our blog body. But what if we want a video on all of our blogs? We can also add custom code on a Collection page template. Here we have our hero elements all arranged and styled how we want them. Maybe we want a video in our header instead of an image. But before we add code, know that we could drop in Webflow’s native video element and connect it to a video link field and skip working with code altogether. But for this demo, we’re going to use a Code Embed element instead, since it gives us more customization options. We’ll add it here in the parent div, paste in the same Vimeo iframe code, and adjust styles on the wrapper class as needed. If we preview, we can see this worked, but we don’t want the same video in every blog header. And here’s the magic. We can go back to our code, select any part of it, click Add field, and connect an existing CMS field, like our Vimeo video number. Because in our Blog collection, we’ve added a field for the Vimeo video number. And we’ve filled it in for every blog in our collection. So, if we add that field to our code where the number would be, Webflow will display different videos in each blog header. You could call it dynamic content… within dynamic content. And we can apply that same principle within a Collection list. We’re on our static blog page where we have a list displaying all our blogs. And the thumbnail image here is connected to our Blog collection’s main image field. But suppose we want a video here instead. We could similarly drop in a code embed element where it fits within our layout. Then, paste in the same embed code and add the Vimeo video number field where the number would appear in the code. And once again, we can preview and see that unique videos are playing for each blog. Now, this is pretty overwhelming, and I have a feeling this won’t make it past design review… but now you know how to add custom code in a CMS rich text field. On a Collection page. And in a Collection list.