Is it possible to add embed code into a collection field in Webflow to display an external calendar on each collection page?
TL;DR
- Add a calendar embed URL field to your Collection.
- Insert an Embed element in the Collection Page Template and dynamically bind the CMS field to the iframe's src.
- Enter a unique calendar URL for each Collection item, then save and publish your site.
Yes, you can display an external calendar (like Google Calendar) on each Webflow Collection Page by using an Embed element with a dynamic Collection field.
1. Use a Collection Field to Store the Embed Code or Calendar URL
- Add a plain text field or a rich text field to your Collection (e.g., Events, Classes, etc.).
- This field will hold either:
- The full calendar embed code (for rich text field, though not ideal), or
- A calendar embed URL (recommended for security and flexibility).
2. Add an Embed Element on the Collection Page
- Open the Collection Page Template in the Designer.
- Drag an Embed element from the Add panel onto the page.
- Inside the Embed code window, use Webflow’s dynamic field binding like:
<iframe src="{{cms-calendar-url-field}}" width="800" height="600" style="border:0" frameborder="0" loading="lazy"></iframe>- Replace
{{cms-calendar-url-field}}with the actual CMS field using the “Add Field” option in the Embed editor.
3. Set the Calendar URLs for Each Item
- In the CMS, go to each Collection item.
- Paste in the unique Google Calendar public embed URL for that calendar view. Example:
https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=Your_Timezone
4. Save and Publish
- Save your changes in the Designer.
- Publish your site and navigate to the Collection pages to verify that the calendars load properly.
Summary
You can show an external calendar for each CMS item by storing a calendar embed URL in a Collection field and inserting it into an Embed element using dynamic binding within the Collection Page Template.