How can I embed iFrame code from a Collection onto my Webflow site?
TL;DR
- Store iframe code in a CMS plain text field.
- Use a Webflow Embed component in a Collection List or Page and bind it to the CMS field via dynamic insertion.
- Publish the site to preview embedded iframe content.
To embed iframe code from a CMS Collection in Webflow, you'll use the Embed component inside a Collection List or Collection Page.
1. Prepare Your CMS Collection
- Make sure your CMS Collection has a plain text field that stores the iframe code you want to embed.
- Example: A field called “Embed Code” containing iframe snippets from trusted sources like YouTube or Google Maps.
2. Add a Collection List or Page
- For a Collection List, drag it into a page or section and bind it to the desired CMS Collection.
- For a Collection Page, go to the Collection Template page (e.g., Blog Post Template).
3. Use the Embed Component
- Within the Collection List or Page, drag a Webflow Embed component (not a video or code block).
- Click Edit Embed, then paste your custom embed code and replace static content with the CMS field.
Example:
- Paste
{{embedCode}}where the iframe should be. - Use Webflow's dynamic bindings: Click the purple + Add Field, then select your iframe code field.
4. Configure Custom Code Safely
- For iframe code to render correctly, your CMS field must not escape HTML.
- Webflow only renders raw HTML code from CMS fields within the Embed element. Regular text blocks will not interpret HTML—only display it as text.
5. Publish to Preview
- Embedded iframes from CMS won’t render inside the Designer.
- Publish your site to see the embedded content live on your domain or Webflow.io URL.
Summary
Use a CMS plain text field to store the iframe code, then bind it inside a Webflow Embed component within a Collection List or Collection Page using dynamic field insertion. Always publish the site to test embedded iframe content.