ClearEvent Inc.

This article outlines the steps needed to embed a list of publicly shared schedules on your website. Embedding schedules on your website allows you to easily maintain all of your schedules in one place using the <a href="https://help.clearevent.com/en/articles/66397-schedules-overview">Schedule Builder</a> feature of ClearEvent's Event Manager App.

A list of public Schedules embedded into a website

Embedding a list of schedules, instead of just a single schedule, allows visitors to your website to easily browse all public schedules you have shared through the ClearEvent platform.

Before you can embed a list of schedules, make sure you follow the steps outlined in the <a href="https://help.clearevent.com/en/articles/6194822-embedding-event-details-on-your-website#h_f8d3f3db94">How to Embed Content from your Event Portal</a>. You must ensure that the JavaScript file <a href="https://cewebprodcdn.clearevent.com/Scripts/iframe-resizer/iframeResizer.min.js" target="_blank" rel="nofollow noopener noreferrer">iframeResizer.min.js</a> is loaded by your website.

Go to the Event Manager App &gt; Schedules section &gt; Schedules tab.

Edit any publicly shared Schedule and go to the Sharing tab.

Copy HTML code from the Share Code field to your clipboard.

On your website, paste the HTML Share Code where you want the list of schedules to appear. The Share Code will look similar to the following, but will still require a few manual changes before a list of Schedules can be displayed:

&lt;iframe id="ceIframeSchedule" src="https://app.clearevent.com/event/[YOUR-EVENT-ID-HERE]/schedules/1234" frameborder="0" style="width: 1px; min-width: 100%;"&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt;iFrameResize({ log: false}, '#ceIframeSchedule');&lt;/script&gt;

Next, modify the Share Code slightly by editing the link in the <code>src</code> attribute to remove the schedule id <code>/1234</code> and add the configuration parameter <code>?backButton=true</code> as follows:

&lt;iframe id="ceIframeSchedule" src="https://app.clearevent.com/event/[YOUR-EVENT-ID-HERE]/schedules?backButton=true" frameborder="0" style="width: 1px; min-width: 100%;"&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt;iFrameResize({ log: false}, '#ceIframeSchedule');&lt;/script&gt;

1. Go to the Event Manager App &gt; Schedules section &gt; Schedules tab. 
2. Edit any publicly shared Schedule and go to the Sharing tab.
3. Copy HTML code from the Share Code field to your clipboard.
4. On your website, paste the HTML Share Code where you want the list of schedules to appear. The Share Code will look similar to the following, but will still require a few manual changes before a list of Schedules can be displayed:
 &lt;iframe id="ceIframeSchedule" src="https://app.clearevent.com/event/[YOUR-EVENT-ID-HERE]/schedules/1234" frameborder="0" style="width: 1px; min-width: 100%;"&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt;iFrameResize({ log: false}, '#ceIframeSchedule');&lt;/script&gt;
5. Next, modify the Share Code slightly by editing the link in the <code>src</code> attribute to remove the schedule id <code>/1234</code> and add the configuration parameter <code>?backButton=true</code> as follows:
 &lt;iframe id="ceIframeSchedule" src="https://app.clearevent.com/event/[YOUR-EVENT-ID-HERE]/schedules?backButton=true" frameborder="0" style="width: 1px; min-width: 100%;"&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt;iFrameResize({ log: false}, '#ceIframeSchedule');&lt;/script&gt;
6. Save your changes.

Prerequisites

Embed a list of Schedules