Upcoming Events Widget

Display a filterable, paginated listing of upcoming events.
Configuration
Environment
Company
Storefront
Language
ENDASVNONLITCAES
Layout
rowcolumn
Font
InterDM SansMontserratArialOpen SansRalewayPoppins
Action color
Action Color
Filtering
Options
Embed CodeCopy this snippet into your website HTML.
HTML
<script src="https://widgets.understory.io/widgets/understory-upcoming-events-widget.js"></script>
<div class="understory-upcoming-events-widget"
  data-company-id="dbeff52e8e0e61f55092c6ad7d40e937"
  data-language="es"
  data-font="Arial"
  data-action-color="#abc123"
></div>
Live Preview
View upcoming events
StorefrontEvery widget renders against exactly one storefront. Use data-storefront-id to say which one.
What the storefront controls
•Which events are listed — only experiences that are listed on that storefront appear, including when data-experience-ids is set.
•The options offered by the filters (experience, category, language, location).
•Where the book buttons link to — each card links into that storefront’s domain.
If you leave it outUnderstory resolves a storefront for the company on its own. That is fine when a company has a single storefront — set the attribute explicitly whenever there is more than one, otherwise the widget may pick up settings and links from the wrong one.
Where to find the IDIn Backoffice under Storefronts → Implementation, the generated embed snippet already contains data-storefront-id for the storefront you pick. The ID is also the one in the URL while editing a storefront: /storefronts/<storefront-id>/edit.
Attribute ReferenceAll available data attributes for the upcoming events widget.
data-company-idrequired
Your Understory company ID.string
data-storefront-id
Which storefront the listing belongs to. Only experiences listed on that storefront are shown, the filter options are scoped to it, and the book buttons link to its domain. Defaults to a storefront resolved for the company.string
data-language
ISO language code (e.g. "en", "da").string
data-font
Google Font family name.string
data-action-color
Hex color for primary action buttons.string
data-layoutdefault: column
Layout direction for event cards."row" | "column"
data-show-filters
Show category/location filter controls."true" | "false"
data-show-read-more
Show a "read more" link on each event card."true" | "false"
data-show-extra-details
Show additional event details."true" | "false"
data-exclude-sold-out
Hide events that are sold out."true" | "false"
data-enable-load-more
Enable a "load more" button for pagination."true" | "false"
data-items-per-pagedefault: 6
Number of events per page.number
data-book-button-label
Custom label for the book button.string
data-experience-ids
Comma-separated experience IDs to display.string
data-location-ids
Comma-separated location IDs to filter by.string
data-category-ids
Comma-separated category IDs to filter by.string