Gift Card Widget

Let customers purchase gift cards directly from your website.Whether customers can buy amount gift cards, experience gift cards or both comes from the company’s gift card settings in Backoffice — there is no embed attribute for it.
Configuration
Environment
Company
Storefront
Language
ENDASVNONLITCAES
Experience
Font
InterDM SansMontserratArialOpen SansRalewayPoppins
Action color
Action Color
Embed CodeCopy this snippet into your website HTML.
HTML
<script src="https://widgets.understory.io/widgets/understory-gift-card-widget.js"></script>
<div class="understory-gift-card-widget"
  data-company-id="dbeff52e8e0e61f55092c6ad7d40e937"
  data-language="no"
  data-font="Poppins"
  data-action-color="#abc123"
></div>
Live Preview
Purchase gift cards with Understory
StorefrontEvery widget renders against exactly one storefront. Use data-storefront-id to say which one.
What the storefront controls
•Which experiences a customer can pick for an experience gift card — only the ones listed on that storefront.
•The payment methods and storefront settings the widget loads.
•The terms and privacy links shown in the consent text, which point at that storefront’s domain.
•The storefront the purchase is attributed to — the ID is sent along with the payment.
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 gift card widget.
data-company-idrequired
Your Understory company ID.string
data-storefront-id
Which storefront the gift card is sold through. Controls the storefront settings and payment methods the widget loads, which experiences can be picked for an experience gift card, and is sent along with the payment. Defaults to a storefront resolved for the company.string
data-experience-id
Preselects an experience, so the widget sells a gift card for that experience instead of an amount. The experience must be listed on the storefront. Omit it to let the customer choose.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