So installieren Sie das Treue-Widget auf Ihrer Website

Das Widget ist ein kleines Treuefenster auf Ihrer eigenen Website. Ohne Ihre Seite zu verlassen, können Kontakte ihre Punkte und Ihre Belohnungen ansehen, eine Belohnung einlösen, einen Empfehlungslink teilen, sich für Ihren Newsletter anmelden, Ihnen eine Nachricht schicken und eine Geschenkkarte kaufen.

Legen Sie fest, was das Widget zeigt, bevor Sie es live schalten. Siehe Das Design Ihres Widgets einrichten.

Den Code installieren

Gehen Sie zu Apps → Widget.
Klicken Sie beim Widget, das Sie installieren möchten, auf Anzeigen.
Öffnen Sie Installation.
Kopieren Sie unter Code fragment das Skript.
Fügen Sie es in das HTML Ihrer Website ein.

Es spielt keine Rolle, wo auf der Seite der Code steht: im Head oder im Body funktioniert beides, ebenso über den Google Tag Manager. Das Widget erscheint, sobald die Seite geladen ist.

Die Karte Anweisungen auf derselben Seite hat Anleitungen für die gängigsten Website-Plattformen. Sie finden sie auch unten.

Auf Ihre eigene Website beschränken

Der Tab Information zeigt die Erlaubte Domäne des Widgets. Um sie festzulegen, öffnen Sie Domain und klicken auf Domäne hinzufügen oder, wenn bereits eine festgelegt ist, auf Domain bearbeiten. Geben Sie Ihre Domain ein und klicken Sie auf Änderungen speichern.

Ist eine erlaubte Domäne festgelegt, erscheint das Widget nur auf Seiten, deren Adresse sie enthält. Auf allen anderen Seiten ist es gar nicht zu sehen. Prüfen Sie das also zuerst, wenn das Widget fehlt.

Der Tab Erweitert hat unter Öffnen & Schließen JavaScript-Befehle zum Kopieren:

window.PiggyWidget.open('overview'); öffnet die Startseite
window.PiggyWidget.open('giftcard'); öffnet den Geschenkkartenshop
window.PiggyWidget.open('loyalty'); öffnet die Belohnungen
window.PiggyWidget.open('login'); öffnet die Login-Seite
window.PiggyWidget.open('request-code'); öffnet die Seite, auf der Kontakte einen Login-Code anfordern
window.PiggyWidget.close(); schließt das Widget

Um einen davon in einem Menü oder einer Schaltfläche zu verwenden, setzen Sie ihn in den Link, zum Beispiel javascript:window.PiggyWidget.open('giftcard');.

Gut zu wissen:

Ist das Widget bereits offen, wechselt der Befehl zur gewählten Seite. Das funktioniert unabhängig davon, ob Widget standardmäßig öffnen auf Offen oder Geschlossen steht.
Ein Befehl, der ausgeführt wird, während das Widget noch lädt, wartet und wird ausgeführt, sobald das Widget bereit ist. Er hat außerdem Vorrang vor Widget standardmäßig öffnen, ein close-Befehl hält das Widget also geschlossen.
Damit ein Befehl funktioniert, muss der Widget-Code auf der Seite sein. Ein Link, der angeklickt wird, bevor der Code selbst geladen ist, etwa während der Google Tag Manager ihn noch lädt, bewirkt nichts.
Der Geschenkkartenshop funktioniert nur, wenn das Widget ein Geschenkkarte-Element mit ausgewähltem Geschenkkartenprogramm hat.

Es gibt keine Webadresse, die das Widget auf einer bestimmten Seite öffnet. Es öffnet sich nur über diese Befehle oder wenn ein Kontakt auf das Widget-Symbol klickt.

Unter Authentifizierung hat derselbe Tab Anmeldung mit Token, Ist angemeldet und Abmelden. Diese sind für Entwickler gedacht, die Kontakte von ihrer eigenen Website aus im Widget anmelden, und Anmeldung mit Token braucht einen Token aus der Leat-API.

WordPress

Am einfachsten fügen Sie Code in Ihre WordPress-Seite mit einem Plugin ein, das Skripte in Header oder Footer einfügt, etwa Header and Footer Scripts. Installieren Sie es, fügen Sie das Code fragment ein und speichern Sie.

Wix

Für eigenen Code auf einer Wix-Seite brauchen Sie einen Premium-Tarif von Wix. Öffnen Sie in Ihren Website-Einstellungen Custom code, fügen Sie das Code fragment ein, wählen Sie Ihre Domain und speichern Sie.

Shopify

Gehen Sie in Shopify zu Online Store → Themes und wählen Sie Edit code. Öffnen Sie theme.liquid, fügen Sie das Code fragment direkt über dem Tag </head> ein und klicken Sie auf Save.

Lightspeed

Gehen Sie in Ihrem Lightspeed-eCom-Backoffice zu Settings → Web Extras. Fügen Sie das Code fragment in Custom Javascript ein, schalten Sie es ein und speichern Sie.

Magento

Gehen Sie in Magento zu Content → Design → Configuration und bearbeiten Sie das gewünschte Theme. Fügen Sie unter HTML Head das Code fragment in Scripts and Style Sheets ein und speichern Sie.

Squarespace

Gehen Sie in Squarespace zu Settings → Advanced → Code Injection. Fügen Sie das Code fragment unter Header ein und speichern Sie.

Prüfen Sie die Erlaubte Domäne im Tab Information. Ist sie festgelegt und passt nicht zur Adresse Ihrer Seite, bleibt das Widget verborgen.
Prüfen Sie, ob das Code fragment auf der Live-Seite steht und nicht nur in einem Entwurf oder einer Vorschau Ihrer Seite.
Wenn Sie es gerade erst installiert haben, leeren Sie den Cache Ihres Browsers oder öffnen Sie die Seite in einem privaten Fenster.