Is it possible to embed completely unique HTML code on each of my dynamic collection item pages in Webflow using a plain-text field and the "Embed" component in a dynamic list?
TL;DR
- Add a Plain Text field to your CMS collection to store unique HTML code.
- Insert an Embed component on the dynamic page and bind it to the Plain Text field.
- Webflow blocks JavaScript and iframes inside dynamic embeds; use a hidden div with a data attribute and inject scripts via custom JavaScript in Page Settings.
Yes, you can embed unique HTML code for each dynamic collection item page in Webflow using a plain-text field and the Embed component. However, there are limitations. Webflow restricts script execution from the CMS Rich Text and Plain Text fields, meaning you can embed only static HTML but not JavaScript or iframes directly.
1. Add a Plain-Text Field to Your CMS Collection
- Go to your CMS Collection and add a Plain Text field (not a Rich Text field).
- Name it something like "Custom HTML Embed" to store unique code per item.
2. Insert an Embed Component on Your Dynamic Page
- Open your Collection Page in the Designer.
- Drag an Embed component from the Add panel (press A to open).
3. Bind the Embed Component to the Plain-Text Field
- Click inside the Embed component
- Press "Add Field" and select the "Custom HTML Embed" field to dynamically populate it.
4. Handle Webflow Script Limitations
- Webflow escapes
<script>and<iframe>tags inside dynamic embeds. - If JavaScript is required, use the Custom Code section in Page Settings with a hidden CMS-bound
<div>to inject the script dynamically. - Example: Assign a custom data attribute (
data-custom) in a div, and use custom JavaScript in the Before