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:
- Go to a Collection item
- Open Rich text field options
- Select custom code
- Paste in your embed
- Save and close
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:
- Go to the Editor
- Click the Collections tab
- Select the Collection with a Rich text field
- 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:
- Create a new line by clicking into a blank Rich text field, or pressing Return on Mac or Enter on PC
- Press the Plus icon
- 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.
To see your custom code working:
- Click the Publish button
- 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.