How To Embed Your Livewhale Calendar on Your Website

It is possible to display dynamic web content on your website using what is called a widget. Widgets, simply put, are self-contained, customizable instructions that allow content from your Group’s Event Calendar to show directly on your website.

Available Widgets

There are two widgets available for use, a List or Tile Grid view that allow for customizable options such as the ability to display a certain number of events, filtering, and other formatting. Alternatively, users can also choose a pre-built Monthly View, but unlike the List and Tile Grid options, the Monthly View cannot be customized (see How to Add a Calendar Month View). The two widgets types and Monthly View display as following:

Tile Grid

List

Month View

How To Create Widgets

You can create new widgets (or edit existing ones) from the Widget Library, which users with Curator permission can access in the Toolbox, located in the upper right hand corner of your screen.

1. From the widget library, select “+Add a new widget”
2. Populate the title and description fields
3. The page is set to Tile Grid as the default selection, but you can also select List using the dropdown, if desired.
   1. As you modify options, a live preview of your widget will appear in the upper right corner in the “Widget preview” window along with the generated widget syntax, which shows the arguments added to the widget as you select options. To see a more complete picture of the widget, select “view in a new window” at the bottom of the Widget preview.
4. After selecting the widget, you will see three options for customization. These options contain several custom areas such as pagination, minimum displays, and more.
   1. "All Options"
   2. "Filtering Options"
   3. "Formatting Options"
   Please note, it is important to clarify the first block of filtering options under “All Options”. If settings are not defined, all events will show on a single page. Suggested setup is shown here: If you need assistance with this step, please contact itservices@uchicago.edu.
5. Once you’ve created and customized your widget, click “Save this widget” at the bottom of the page. After saving you will be returned to the Widget Library where the list of available Widgets will display.
   1. You can view the widget by clicking “Preview” shown to the right of the widget name. This will open a new window and allow you to view the widget in real time.

How To Embed Widgets

1. Once ready to embed it onto your webpage, obtain the widget embed code by clicking "Get Code” shown to the right “Preview” option.
2. Depending on what type of website the widget is being used on, there are different steps to take:
   1. For Sitecore sites, copy the widget code and paste it on your desired page using the Embed Component. If you need help please email webhelp@uchicago.edu with instructions, including the page URL and where on the page it needs to be placed.
   2. For Voices sites, fill out the "ITS Web Services Support Request" form. For the "Request Type", select "Request assistance with a specific web tool or product" and choose "Voices" from the "Which tool is this concerning?" dropmenu. Paste the widget code in the "How can we help?" text box, with instructions for where it should be placed. Please include the page URL as well.
   3. For ExpressionEngine sites, you can embed the widget code directly (please refer to the instructions for your content management system) or fill out the "ITS Web Services Support Request" form. For the "Request Type", select "Request assistance with a specific web tool or product" and choose "ExpressionEngine" from the "Which tool is this concerning?" dropmenu. Paste the widget code in the "How can we help?" text box, with instructions for where it should be placed. Please include the page URL as well.

How To Add A Calendar Month View

It is also possible to display your Group’s Event Calendar as a monthly view on your website using an iframe. The pre-set Monthly View iframe code will be displayed at the top of the Widget Library. Note that the monthly view does not have customizable options like the Tile Grid and List view widgets, therefore will display with the default settings as shown in the image below.

1. To embed the Month View onto your page as an iframe, within the Widget Library copy the code shown in red and refer to the instructions for your content management system.