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:
And, this is great when we want to add custom code for one specific Collection item, like a blog post or product.
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:
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.
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.
To select an option:
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.
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:
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.