Skip to main content

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

Example of the Events Calendar Tile Grid Widget


Example of Events Calendar List Widget

Month View

Example of Events Calendar Month-View iFrame

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.

Menu showing how to get to the Widgets builder

  1. From the widget library, select “+Add a new widget” Widget Library
  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. Widget Creation Interface
  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: Filters and Formatting options If you need assistance with this step, please contact
  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. Example of an Events Calendar Widget
  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 code and paste it on your desired page using the Embed Component. If you need help please email with instructions, including the page URL and where on the page it needs to be placed.
    2. For Voices sites: copy the code and email it to with instructions including the page URL and where on the page it needs to be placed.
    3. For ExpressionEngine sites: You can embed the code directly (please refer to the instructions for your content management system) or send an email with the embedded code to with instructions including the page URL and where on the page it needs to be placed.

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.

Example of Events Calendar Month-View iFrame

  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. Month View Embed Code