Skip to main content
Diese Anleitung beschreibt, wie du das VOUCHER! (der Online-Gutscheinverkauf) Widget auf deiner Website einbettest, in welcher Sprache es geladen wird und wie du es mehrfach auf einer Seite verwendest.

​
Voraussetzungen

​
Schritte

  1. Öffne das VOUCHER! Widget im Mandant-Dashboard unter Widgets.
  2. Scrolle zum Abschnitt Einbettungscode.
  3. Wähle über die Sprachauswahl die gewünschte Sprache aus (Deutsch, Italienisch, Englisch).
  4. Kopiere den angezeigten HTML-Code.
  5. Füge den kopierten Code in den HTML-Quellcode deiner Website ein.
Der Code besteht aus zwei Teilen:
Das <script>-Tag lädt das Widget einmal pro Seite. Das <anexis-cloud-voucher>-Tag bindet das eigentliche Widget an dieser Stelle ein.

​
Attribute

​
Mehrere Sprachen auf derselben Website

Du kannst pro Sprache eine eigene Unterseite erstellen und jeweils den Einbettungscode mit dem passenden language-Attribut einfügen. Die externalid bleibt für alle Sprachen identisch — sie kennzeichnet das Widget, nicht die Sprache.

​
URL-Parameter

Du kannst das Widget vorausfüllen, indem du die folgenden Query-Parameter an die URL der Webseite anhängst, auf der das Widget eingebettet ist.

​
voucher_id

Die ID eines bestimmten Gutscheins. Wenn der Parameter gesetzt ist, springt das Widget direkt zur Konfiguration dieses Gutscheins. Der Gutschein muss mindestens einer Kategorie zugeordnet sein, sonst wird er ignoriert.

​
voucher_category_id

Die ID einer Gutscheinkategorie. Wenn der Parameter gesetzt ist (und voucher_id nicht), springt das Widget direkt zur Gutscheinauswahl innerhalb dieser Kategorie.

​
form_fields

Ein JSON-Objekt mit Key-Value-Paaren zum Vorausfüllen der Käuferdaten und der Zusatzfelder. Der Key muss der Data-ID des Formularfeldes in Snake-Case entsprechen (z. B. EmailAddress wird zu email_address). Ungültiges JSON wird stillschweigend ignoriert.

​
Beispiel-URLs

Direkter Aufruf eines bestimmten Gutscheins mit vorausgefüllten Käuferdaten:
Direkter Aufruf einer Gutscheinkategorie:
Für Verlinkungen müssen Anführungszeichen innerhalb eines href-Attributs URL-codiert werden:

​
Data-Attribute

Alle Parameter, die per URL-Query-String übergeben werden können, lassen sich auch als Data-Attribut direkt auf dem <anexis-cloud-voucher>-Tag setzen. Die übergebenen Daten müssen stets gültiges JSON enthalten (mit doppelten Anführungszeichen). Bei gleichzeitig gesetztem URL-Parameter und Data-Attribut hat der URL-Parameter Vorrang.

​
Mehrfaches Einbinden des Widgets

Wenn du VOUCHER! mehrmals auf derselben Seite einbindest, vergib pro Instanz eine eindeutige id:
Jedes Widget auf einer Seite braucht eine eigene, eindeutige id — unabhängig vom Widget-Typ. Kombinierst du BOOKED!, REQUEST! und VOUCHER! auf derselben Seite, muss trotzdem jedes einzelne Tag eine andere id haben. Zwei Widgets auf derselben Seite dürfen sich niemals dieselbe id teilen, auch nicht bei unterschiedlichen Widget-Typen.
Ohne eindeutige id werden Daten zwischen den Widgets vermischt, und nach einer Weiterleitung — etwa zurück von einer Zahlung — kann die Antwort beim falschen Widget landen. Ein Beispiel mit unterschiedlichen Widget-Typen auf einer Seite:

​
Tipps

  • Binde das <script>-Tag nur einmal pro Seite ein, auch wenn du mehrere Widget-Instanzen verwendest.
  • Teste die Einbettung auf einer Vorschau-Seite, bevor du sie auf der Live-Website veröffentlichst.
  • Wenn das Widget nicht erscheint, prüfe die Browser-Konsole auf JavaScript-Fehler und stelle sicher, dass das Modul VOUCHER!, die Komponente und das Widget aktiv sind.

​
Verwandte Artikel