Instructions to create your iFrame HTML

1. If you have not created an "Embeddable Content" source page,  please do so before proceeding to steps 2 - 5
   • The content options on the this page should only include the "Events - Layout - List View" widget
   • Example "Embeddable Content" page: https://cannonbeach.org/calendar-embed-source/
2. After creating your new "Embeddable Content" page for the iFrame source, edit the text boxes below via the CMS page editor
   • Edit the "Embeddable - Events List Collection Widget" text box
3. Switch to "Source" view
4. Replace path /calendar-embed-source/ with your newly generated path (e.g. /music-calendar-embed-source/ )
5. Adjust "height" property as needed
6. Copy all HTML and send to 3rd party

NOTES:

• It is a good idea to create a new nav item for every embed. This way, you have a unique content page/url for each partner embed, which will assist in keeping track of them all.
• You may copy/paste the "Sample iFrame HTML" below to send your partner. Please, however, make sure to update the "src" attribute URL with the appropriate "Embeddable Content" source page URL.

Sample iFrame HTML

<iframe frameborder="0" height="2800" scrolling="yes" src="https://cannonbeach.org/calendar-embed-source/" style="overflow: hidden;" width="100%"></iframe>

Include this script tag in the same location as your iFrame to ensure responsive sizing

<script> window.addEventListener('message', function(e){ if (e.origin !== 'https://cannonbeach.org'){ return } const iframe = document.getElementById('event-iframe') let newHeight = e.data iframe.style.height = newHeight + 'px' }) </script>

Embeddable - Events List Layout Widget