Is it possible to add embed code into a collection field in Webflow to display an external calendar on each collection page?
- Add a Plain Text or Rich Text field in your CMS Collection to store the external calendar embed code.
- Use an Embed element on the Collection Page template and dynamically insert the embed code using the Add Field function.
- Publish your site to view the working calendar, as dynamic embeds don't render in preview.
Yes, it's possible to display an external calendar using embed code on each Webflow collection page by storing the embed code in a collection field and using the Embed element. Here's how to do it properly.
1. Create a Rich Text or Plain Text Field in the CMS
- Go to your CMS Collection settings.
- Add a new field of type Plain Text or Rich Text. Name it something like “Calendar Embed Code.”
- Paste the embed code (from Google Calendar or another external service) into this field for each collection item.
Webflow doesn’t support storing actual HTML in rich text/plain text fields for rendering automatically — you must use this content inside an Embed element.
2. Add an Embed Element to the Collection Page
- Open your Collection Page template in the Webflow Designer.
- Drag an Embed element onto the page where you want to show the calendar.
3. Use Dynamic Embed Code
- In the Embed element, insert the following:
<div>oriframecode using Webflow's Add Field (+) to insert the CMS field dynamically.- For example, if using a Google Calendar iFrame embed stored in a plain text field, insert:
{{wf {"path":"calendar-embed-code","type":"PlainText"} }}inside the Embed element.
Use “Add Field” (lightning bolt icon) in the Embed window to dynamically insert the calendar code from the collection.
4. Publish and Test
- Publish your site. Webflow only renders dynamic Embed code on the published site, not in the Designer preview.
- Visit a collection page to confirm the external calendar displays as expected.
Summary
To display a unique external calendar on each CMS collection page, store the calendar embed code in a Plain Text or Rich Text field, and then insert that dynamically into an Embed element on the Collection Page template. Always test on the published site, as dynamic embeds don’t render in preview.
