Booking Widget

Embed a complete experience booking flow on any website.
Configuration
Environment

Company

Storefront

Storefront


Experience mode


Action color
Action Color
Embed CodeCopy this snippet into your website HTML.
HTML
<script src="https://widgets.understory.io/widgets/understory-booking-widget.js"></script>
<div class="understory-booking-widget"
  data-company-id="dbeff52e8e0e61f55092c6ad7d40e937"
  data-storefront-id="1a21391d7ef14dde80c385be860eb767"
  data-language="ca"
  data-font="Inter"
  data-action-color="#abc123"
></div>
StorefrontEvery widget renders against exactly one storefront. Use data-storefront-id to say which one.
What the storefront controls
The payment methods offered in checkout.
Storefront preferences such as tax-inclusive prices and "from" prices.
Links out of the flow — gift cards, private event requests, terms and privacy — which point at that storefront’s domain.
The storefront the booking is created against; the ID is sent with the booking, and the guest is sent to that storefront for the receipt page.

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 booking widget.
data-company-idrequired
Your Understory company ID.string

data-storefront-id
Which storefront the booking flow runs against. Controls the payment methods, tax display and other storefront settings used during checkout, and the storefront the guest is sent to for the receipt page afterwards. Defaults to a storefront resolved for the company and experience.string

data-experience-id
Show a single experience. Omit for multi-experience mode.string

data-distributor-company-id
Distributor company ID for reseller setups.string

data-tags
Comma-separated tags to filter experiences.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