Gutschein-Widget einbinden

Das Gutschein-Widget ist eine <giftcard-widget>-Webkomponente, die den APRO-Gutscheinshop für eine Location in einem iframe lädt. Zwei Zeilen genügen — Kundinnen und Kunden kaufen und personalisieren Gutscheine, ohne die Host-Seite zu verlassen.

Skript: https://smorderfrontend.azureedge.net/embed/widget.js
Tag: <giftcard-widget location-id="…">
Drei Modi: Inline-Liste (Gutscheinliste füllt den Container), Inline-Button (Button im Seitenfluss öffnet ein Panel) oder schwebender Button (fixierter FAB öffnet ein Panel)

Schnellstart

Minimale Einbindung — Skript einmal laden, danach das Tag dort einsetzen, wo der Shop erscheinen soll:

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

Mehr braucht es nicht. Das Widget lädt die Gutscheinkategorien der Location, rendert den Shop und führt durch den gesamten Kaufvorgang. Die Host-Seite muss lediglich Platz für das Layout bereitstellen.

Beispiel — Inline-Button

Gerendert mit presentation="inline-button". Der Trigger steht im Seitenfluss genau dort, wo das <giftcard-widget>-Tag platziert ist; ein Klick öffnet den Gutscheinshop in einem Modal-Panel.

<script src="https://smorderfrontend.azureedge.net/embed/widget.js"></script>
<giftcard-widget
  location-id="535"
  locale="de"
  presentation="inline-button"
  expand-icon="redeem"
  expand-label="Gutscheine"
  headline="Gutschein kaufen"
  max-height="700"
></giftcard-widget>

Beispiel — Inline-Liste

Dasselbe Widget ohne presentation — die volle Gutscheinliste fügt sich in den Seitenfluss ein, begrenzt durch max-height.

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

Interaktiver Builder

Attribute unten anpassen — Markup und Vorschau aktualisieren sich sofort. Den fertigen Schnipsel direkt ins CMS oder Template kopieren.

Konfiguration

Location & Sprache

location-id · Location Numerische APRO-Location-ID; muss auf dem gewählten Host existieren. locale · Sprache Wird an die Gutschein-Oberfläche übergeben und bestimmt die Standard-Beschriftung des FAB.

Modus & Größe

presentation · Modus Inline bettet die Liste in den Seitenfluss ein; ausklappbar nutzt einen schwebenden Button mit Panel. max-height · Höhenlimit (px) Inline: iframe-Höhe. Ausklappbar: maximale Panel-Höhe (zusätzlich an den Viewport gekoppelt). page-background · iframe-Hintergrund Beliebige CSS-Farbe. Wird auf den iframe-Body im Embed angewendet, damit sich der Shop optisch in die Host-Seite einfügt. Leer = Standard des Shops.

Button & Panel

position · FAB & Panel-Anker Ecken-Schlüssel mit Bindestrich; steuert FAB-Position und die Kante, an der das Panel andockt. max-width · Panel-Breite (px) Gilt nur für das ausklappbare Panel (nicht für die Inline-iframe-Breite). expand-label · FAB-Text Überschreibt die sprachabhängige Standardbeschriftung auf dem runden Button; leer = automatisch. expand-theme · FAB-Optik Dunkler oder heller runder Ausklapp-Button; nur bei „Ausklappbar“. expand-icon · Material-Icons-Glyph Material-Icons-Ligature-Name (siehe Google Fonts Icons). Keine Bild-URLs. headline · Titelleiste Nur bei „Ausklappbar“: Leiste über dem iframe im Panel; bei gesetztem Wert auch ?headline=…

Verhalten auf Mobilgeräten

Gutschein-Editor auf dem Handy in neuem Tab öffnen Setzt breakoutPageOnMobile="true", damit der individuelle Gutschein-Editor das iframe auf Smartphones verlassen kann.

Markup

Der HTML-Schnipsel zum Einfügen in Ihre Seite. Aktualisiert sich beim Bearbeiten der Felder.

Bereit.

Live-Vorschau

Das Widget unten wird mit dem Markup links gerendert.

Inline-Button-Modus

Empfohlener Standard. Mit presentation="inline-button" wird der Trigger genau dort gerendert, wo das <giftcard-widget>-Tag platziert ist. Ein Klick öffnet den Gutscheinshop in einem Modal-Panel. Das Layout der Host-Seite bleibt unverändert, bis der Kunde aktiv wird.

<giftcard-widget
  location-id="535"
  locale="de"
  presentation="inline-button"
  expand-icon="redeem"
  expand-label="Gutscheine"
  headline="Gutschein kaufen"
  max-height="700"
></giftcard-widget>

Schwebender-Button-Modus

Mit presentation="expandable" wechselt das Widget in den fixierten FAB-Modus: ein runder Pill-Button in einer von sechs Ecken öffnet ein verankertes Panel mit dem Shop. Praktisch, wenn dauerhaft ein Einstiegspunkt sichtbar sein soll, der dem Besucher beim Scrollen folgt.

<giftcard-widget
  location-id="535"
  locale="de"
  presentation="expandable"
  position="right-bottom"
  max-height="700"
  max-width="420"
  expand-label="Gutscheine"
  expand-icon="card_giftcard"
  headline="Gutschein kaufen"
></giftcard-widget>

position steuert sowohl die FAB-Position als auch die Kante, an der das Panel andockt. Erlaubte Werte:

right-bottom (Standard), left-bottom, center-bottom
right-top, left-top, center-top

expand-icon ist ein Material-Icons-Ligaturname (z. B. redeem, card_giftcard, celebration). Wird über @fontsource/material-icons im Embed gebündelt — Bild-URLs werden nicht unterstützt.

expand-theme schaltet zwischen dark (Standard) und light für die Optik. Die Modal-Titelleiste folgt demselben Theme — dunkel im Standard, hell bei expand-theme="light".

Inline-Listen-Modus

presentation weglassen (oder leer setzen), um die volle Gutscheinliste in den Seitenfluss zu rendern. Das Widget übernimmt die Breite des Elternelements und wächst bis zur natürlichen iframe-Höhe, begrenzt durch max-height. Geeignet für eine dedizierte „Gutscheine”-Landingseite.

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

Attribute

Attribut	Pflicht	Standard	Beschreibung
`location-id`	✅	—	Numerische APRO-Location-ID. Ohne Wert mountet das Widget nicht.
`locale`	—	`de`	UI-Sprache im iframe: `de`, `en`, `it`. Setzt auch die Standard-Beschriftung des Buttons.
`presentation`	—	“ (Inline-Liste)	`inline-button` rendert einen Trigger im Seitenfluss, `expandable` rendert einen fixierten FAB. Leer oder unbekannt = volle Inline-Liste.
`max-height`	—	—	Pixel-Limit. Inline-Liste: iframe-Höhe. Panel-Modi: Panel-Höhe (zusätzlich an Viewport gekoppelt).
`max-width`	—	—	Pixel-Limit für die Panel-Breite. Nur Panel-Modi.
`position`	—	`right-bottom`	Einer von sechs Ecken-Schlüsseln; bestimmt den Panel-Anker (und FAB-Position bei `presentation="expandable"`). Nur Panel-Modi.
`expand-label`	—	locale-Standard	Beschriftung auf dem Trigger-Button. Leer = automatisch nach `locale`. Nur Panel-Modi.
`expand-theme`	—	`dark`	`dark` oder `light`. Gilt für Trigger und Modal-Titelleiste. Nur Panel-Modi.
`expand-icon`	—	—	Material-Icons-Ligature links vom Text. Nur Panel-Modi.
`headline`	—	—	Titelleiste über dem iframe im Panel; wird auch als `?headline=…` an das iframe weitergegeben. Nur Panel-Modi.
`page-background`	—	—	Beliebige CSS-Farbe (`#ffffff`, `rgb(...)`, `transparent`, …). Wird auf den iframe-Body angewendet, damit sich der Shop optisch in die Host-Seite einfügt; tönt zusätzlich Panel und Inline-Wrapper, bis das iframe geladen ist.
`breakoutPageOnMobile`	—	`false`	Bei `true` öffnet sich der individuelle Gutschein-Editor auf Smartphones in einem neuen Tab statt im iframe.

Skript einbinden

widget.js einmal pro Seite laden — beliebig im <head> oder vor </body>. Das Skript registriert das <giftcard-widget>-Custom-Element global; nachfolgende Tags aktivieren sich automatisch.

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

Mehrere Widgets auf einer Seite sind unterstützt (z. B. ein Inline-Shop plus ein ausklappbares FAB an anderer Stelle). Jedes iframe ist isoliert.