Skip to main content
Calendar Help Calendar Help
  1. HOME
  2. Training
  3. Build Event Feed Widgets

How to Add an Event Feed to Your Website

Easily display events from the Calendar site on your own website by creating a widget. Each widget dynamically pulls event information based on the settings you choose, ensuring the right events appear in the right places. Create as many widgets as you need to customize different sections of your site with relevant event content.

See Widget Samples

  1. Access the Widget Builder to create your feed. You can also navigate there by clicking "Widget Builder" in the footer of the Calendar website or in the Quick Links section of your user dashboard.
  2. Enter in your widget parameters in the builder form.
    1. Number of Results: Select the number of events you want your website to display. The maximum number is 50. 
    2. Days Ahead: This setting controls how many days into the future the widget will show events. You can display events up to a maximum of 365 days ahead.
      1. Enter a negative number to display past events. For example, '-30' will show events from the last 30 days. You can display up to 365 days of past events.
    3. Content: Apply these parameters to target the events you want to display on the widget.
      1. Experience: You can customize whether to display all events, in-person, virtual or hybrid events.
      2. Groups: Selecting your group(s) will be a key component to ensure that the events you manage will display on the widget.
      3. Places, Event Type, Audience, Neighborhood: These are additional parameters you can apply to customize your widget.
      4. Keywords and Tags: You can specify events by using the custom tags and keywords that you added to the event.
        1. Example: You are part of the group 'University Communications' and tag your events with 'Digital Strategy' as a sub-filter, you can add this tag to the widget so it displays only events that are both part of 'University Communications' and tagged 'Digital Strategy'.
      5. Check the following features if applicable.
        1. Only Show Featured: Check this to only display “Featured” events and exclude any non-featured events. 
          1. Note, “Featured” event is an option setting under the “In Calendar Promotion” section of the “Publish” tag in the event editor and is only available to certain permission levels.
        2. Only Show Sponsored: Check this to only display sponsored events and exclude non-boosted events.
          1. Similar to “Featured” events, this option is only available to certain permission levels.
        3. Including All Matching Instances: If checked, the Widget will display all recurring instances. If not checked, the Widget will only display the first instance in the recurring chain.
        4. Hide Past Events: Check this to ensure you are not displaying any past events.
      6. Content Must Match: Choose the matching criteria from the dropdown to define how closely content must align in order to feed relevant events to the widget.
        1. Select one of the following:
          1. At least one Place, Group, Keyword or Tag and one Filter item
          2. Any Place, Group, Keyword, Tag or Filter item
          3. At least one Place and Group and all Keywords, Tags and Filter items
          4. Any place or Group and at least one Keyword or Tag and one Filter item
    4. Exclude Content: You can set exclusion parameters to ensure your widget will not display certain events.
      1. You cannot exclude by tags and keywords currently.
    5. Display Options: Select how your widget will display using these dropdown options.
      1. Widget Type:
        1. List: A display of events.
        2. Mini Calendar + List: Adds an interactive calendar date filter and the list of events.
      2. Style: Select a layout of the widget by choosing between modern, card or classic.
      3. Additional Widget Display Options:
        1. Hide Descriptions
        2. Hide Event Images
        3. Hide Event Times
        4. Hide “Visit Calendar of Events” Link
  3. After you have configured your widget click “Preview Widget” to see a live preview of the widget in a new browser tab. You can make adjustments to the fields above and preview your widget as many times as you would like until you find one that suits your needs.
  4. When you’re ready to embed your widget, click “Generate Embed Code”.
  5. Copy and paste the widget embed code onto your webpage.
    1. Important! The code must be embedded as HTML source code. Campus CMS users, learn about embedding code in your CMS page.