How can I include HTML code as a field in a Webflow Collection?

To include HTML code in a Webflow Collection, you'll need to store the code in a Collection field and then render it using a supported method in your Webflow project.

1. Add a Rich Text or Plain Text Field in CMS

• Go to the CMS and edit your Collection.
• Add a new field of either:
• Rich Text, which supports basic HTML-like formatting through the Webflow Designer (useful for styled content).
• Plain Text, which works best if you're adding actual raw HTML tags (like <script>, <iframe>, etc).

2. Insert the Field in a Page Using an Embed Element

• Drag an Embed Element (</>) into your Collection Page or into a Collection List.
• Inside the Embed, insert the field dynamically:
• Click the + Add Field button at the top-right of the Embed code area.
• Select the Plain Text field that contains your HTML.

3. Enable Dynamic HTML Rendering

• Webflow will wrap the dynamic field in quotation marks automatically, escaping HTML by default.
• To allow actual HTML rendering, modify the Embed code like this:
• Remove the wrapping quotation marks around the dynamic field.
• Use the dynamic reference directly in the Embed, like: {{wf {"path":"your-field","type":"PlainText"} }} — this renders the HTML stored in your Collection.

4. Use Caution With Scripts

• If you're adding <script> tags or third-party embeds:
• Webflow does not execute scripts stored from dynamic CMS content directly for security reasons.
• Most basic HTML (like <iframe>, and <div>) works, but for scripts you may need to custom code a workaround or inject via custom code in the page settings instead.

Summary

To include HTML in a Webflow Collection, store the HTML code in a Plain Text field and render it using a custom Embed Element within your template. Be aware that Webflow will not run dynamic scripts for security, but HTML rendering works in supported components.