Custom code in the CMS

There are a number of ways to add custom code in a Webflow project. We can add custom code site-wide in our project settings (e.g. the Google Analytics code) and we can add an embed to our template pages (e.g. for all of our blog posts). Learn more about Custom code embed.

But, what if we want to add an embed to a single blog post, like an embedded tweet or embedding our favorite Soundcloud song?

In this lesson:

1. Go to a Collection item
2. Open Rich text field options
3. Select custom code
4. Paste in your embed
5. Save and close
6. Publish

And, this is great when we want to add custom code for one specific Collection item, like a blog post or product.

Go to a Collection item

First, we'll go to a Collection item (like a blog post) that is using a Rich Text Element. 

In a project with CMS enabled:

1. Go to the Editor
2. Click the Collections tab
3. Select the Collection with a Rich text field
4. Then, select the Collection item (e.g. a blog post)

We’ll do this in the Editor for our example, but you could go to a Collection item in the Designer also.

Learn more about adding the Rich text field to a Collection.

Open Rich text field options

There are a number of different types of content we can add to a Rich text field. We can paste or type in text content, and we can choose a Rich text field option (e.g. an image, a video, a numbered list) to add content.

When using a Rich text field, you can see the available options by clicking into a blank field or creating a new line. Doing this will show the available options that you can select.

Select custom code

To select an option:

1. Create a new line by clicking into a blank Rich text field, or pressing Return on Mac or Enter on PC
2. Press the Plus icon
3. Select custom code

Paste in your embed

When you select the custom code option, you’ll then see the HTML Embed Code Editor. This is where we can paste our custom code (like an embed snippet). Afterward, click Save & Close.

Save and close

Afterward, click Save & Close. Doing this will save the code that we added into our Collection and close the HTML Embed Code Editor.

Note: Custom code is not validated. Incorrect code may cause issues with the published page.

Publish

To see your custom code working:

1. Click the Publish button 
2. Then, view the live site (you can do this from the Editor by pressing the Back to live site button)

And, that’s it! Your custom code is published. Now when you view your live site, you can see your embed code working as expected.