Web widgets

The voucher widget is a <giftcard-widget> web component that loads the APRO voucher shop for a single location in an iframe. Drop two lines into any page and customers can browse, buy and personalise gift cards without leaving the host site.

• Script: https://smorderfrontend.azureedge.net/embed/widget.js
• Tag: <giftcard-widget location-id="…">
• Three modes: inline list (the voucher list fills its container), inline button (a button is rendered in the page flow and opens a panel), or floating button (a fixed FAB opens a panel)

Quick start

The minimum embed — load the script once, then add the tag wherever the shop should appear:

<script src="https://smorderfrontend.azureedge.net/embed/widget.js"></script>
<giftcard-widget location-id="535"></giftcard-widget>

That's it. The widget queries the location's voucher categories, renders the shop, and handles the customer flow through to checkout. The host page only needs to provide layout space.

Live sample — inline button

Rendered with presentation="inline-button". The trigger sits in the page flow exactly where the <giftcard-widget> tag is placed; clicking it opens the voucher shop in a modal panel.

<script src="https://smorderfrontend.azureedge.net/embed/widget.js"></script>
<giftcard-widget
  location-id="535"
  locale="en"
  presentation="inline-button"
  expand-icon="redeem"
  expand-label="Vouchers"
  headline="Buy a voucher"
  max-height="700"
></giftcard-widget>

<div style="padding:1rem; margin:1.25rem 0;">
<giftcard-widget location-id="535" locale="en" presentation="inline-button" expand-icon="redeem" expand-label="Vouchers" headline="Buy a voucher" max-height="700" ></giftcard-widget>
</div>

Live sample — inline list

Same widget without presentation set — the full voucher list drops into the page flow up to a fixed max-height.

<script src="https://smorderfrontend.azureedge.net/embed/widget.js"></script>
<giftcard-widget
  location-id="535"
  locale="en"
  max-height="700"
></giftcard-widget>

<style>{giftcard-widget:not([presentation]) { display: block; min-height: 320px; }}</style>

<div style="border:1px dashed var(--sl-color-gray-5); border-radius:10px; padding:1rem; margin:1.25rem 0; min-height:740px;">
<giftcard-widget location-id="535" locale="en" max-height="700" style="display:block; height:700px;" ></giftcard-widget>
</div>

Interactive builder

Tweak any attribute below — the markup updates instantly and the preview re-mounts the widget with the new configuration. Copy the final snippet straight into your CMS or template.

Inline-button mode

The recommended default for most pages. Set presentation="inline-button" to render the trigger in the page flow exactly where the <giftcard-widget> tag is placed. Clicking it opens the voucher shop inside a modal panel. The host page's layout stays untouched until the customer opts in.

<giftcard-widget
  location-id="535"
  locale="en"
  presentation="inline-button"
  expand-icon="redeem"
  expand-label="Vouchers"
  headline="Buy a voucher"
  max-height="700"
></giftcard-widget>

Floating-button mode

Set presentation="expandable" to switch to a fixed floating-action button: a circular pill in one of six corners opens a docked panel with the shop inside. Useful when you want a persistent entry point that follows the visitor down the page.

<giftcard-widget
  location-id="535"
  locale="en"
  presentation="expandable"
  position="right-bottom"
  max-height="700"
  max-width="420"
  expand-label="Gift cards"
  expand-icon="card_giftcard"
  headline="Buy a voucher"
></giftcard-widget>

position controls both the FAB anchor and which edge the panel docks to. Allowed values:

• right-bottom (default), left-bottom, center-bottom
• right-top, left-top, center-top

expand-icon is a Material Icons ligature name (e.g. redeem, card_giftcard, celebration). Bundled via @fontsource/material-icons inside the embed — image URLs are not supported.

expand-theme switches between dark (default) and light styling for the button. The panel header follows the same theme — dark in default mode, light when expand-theme="light".

Inline-list mode

Leave presentation empty (or omit it) to drop the voucher list itself into the page flow. The widget takes the width of its parent and grows to the iframe's natural height, capped at max-height. Use this when you want a dedicated "Gift cards" landing section.

<giftcard-widget
  location-id="535"
  locale="en"
  max-height="700"
></giftcard-widget>

Attributes

Loading the script

Load widget.js once per page — anywhere in <head> or before the closing </body>. It registers the <giftcard-widget> custom element globally; subsequent <giftcard-widget> tags on the same page activate automatically.

<script src="https://smorderfrontend.azureedge.net/embed/widget.js"></script>

Multiple widgets on one page are supported (e.g. an inline shop plus an expandable FAB elsewhere). Each iframe is isolated.