Sometimes we want to embed things into a specific blog post. Like a tweet. But, we don't want it on EVERY post.
So - here we are in our blog post. We’re doing this in the Webflow Editor, but it works the same in the Webflow Designer. Now, anywhere in our post, we can press return on our keyboard to get a bunch of options. And in those options, we have our custom code thing. Click that, and our goal is this: we want to paste in our embed. So let’s go over to Twitter.
Luckily, Grímur’s still logged in.
Look how ripped I was in two thousand thirteen. And our photo? Perfect. Let’s post that.
And here in this tweet, we can click this three dot thing, select Embed Tweet, and from here - we can copy the code.
Back in our project - we can paste in our snippet. Click save & close.
And to see our embed? Let’s publish our project. And now, when we go to our live site (where the custom code is rendered) we now see our tweet in this particular blog post (exactly where we placed the embed).
Now, could we do the same with SoundCloud?
Go to our blog post
Press Return
Go in and add the the little code thing
Go to SoundCloud
Copy the embed code
Paste that in our blog post
Save and close
Publish.
That’s embedding something in a blog post…in Webflow.
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.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback