How can I embed iFrame code from a Collection onto my Webflow site?
TL;DR
- Add a Plain Text CMS field to your Collection for the iframe code.
- Use an Embed element inside a Collection List or Collection Page and insert the CMS field dynamically within the embed code.
- Publish the site to render the iframe content for each Collection item on the live site.
You can embed iframe code from a CMS Collection onto your Webflow site using the Embed element inside a Collection List or Collection Page. This allows dynamic rendering of iframes using Collection fields.
1. Create a Collection Field for the iFrame Code
- Go to CMS → Collections and open the relevant Collection.
- Add a Plain Text field or Rich Text field (Plain Text is preferred to avoid extra markup).
- Name it something like "iFrame Embed Code".
- Paste valid iframe code (without
<script>) into this field for each item.
2. Add an Embed Element into the Collection
- Open the page or Collection Page where you want the iframe to appear.
- Drag a Collection List (if not on a Collection Page) and bind it to your desired Collection.
- Inside the Collection item, drag in an Embed element from the Add panel.
3. Use Dynamic Field References in the Embed
- In the Embed editor, write your iframe manually or add a placeholder.
- Click + Add Field next to the editor and insert your iframe code field into the appropriate position.
- Example:
{{wf {"path":"iframe-embed-code","type":"PlainText"} }}will dynamically insert the iframe code.
4. Publish to View the iFrame
- Hit Publish and view your live site.
- The iframe will render dynamically for each Collection item using the iframe code stored in the CMS.
5. Important Notes
- Webflow does not render the iframe in the Designer—only on the published site.
- Make sure the iframe code you're adding is safe and properly formatted, e.g.,
<iframe src="https://example.com" loading="lazy"></iframe>. - Avoid using
<script>tags—Webflow disallows them in CMS fields.
Summary
To embed iframe code from a Collection in Webflow, store the iframe in a Plain Text CMS field, then use the Embed element with a dynamic field reference inside a Collection List or Page. Preview it on the live site to ensure proper rendering.