Grundlagen

Zugriff auf den Bereich: /admin/retailer/widget

Einer Website die Nutzung der Widgets erlauben

Zunächst müssen Sie die Website(s) angeben, die berechtigt sind, Ihre Widgets anzuzeigen. Dabei handelt es sich um eine Sicherheitsmaßnahme: Nur die von Ihnen ausdrücklich hinzugefügten Domains können Ihre Widgets laden und anzeigen. Dies verhindert, dass jemand Ihren Code kopiert und auf einer fremden Website verwendet.

Sie können mehrere Websites hinzufügen: zum Beispiel Ihre Produktivwebsite, eine Vorabversion zum Testen oder sogar mehrere Verkaufswebsites, wenn Sie Ihre Produkte auf verschiedenen Plattformen vertreiben.

Newsletter-Anmeldeformular

Mit der Option „Newsletter-Anmeldeformular anzeigen“ (Ja / Nein) wird ein Kontrollkästchen im Warenkorb-Widget angezeigt. Wenn ein Kunde dieses Kästchen beim Kauf ankreuzt, wird seine Zustimmung in Ihrer Kundendatenbank gespeichert (Spalte „Newsletter: Ja/Nein“). So können Sie ein Marketing-Automation-Tool wie Brevo für Ihre E-Mail-Kampagnen per Export befüllen, oder wenn die Verbindung direkt zwischen Tourbiz und Ihrem Marketing-Automation-Tool hergestellt wird.

Ein Wort für Entwickler: Skripte vs. iframes

Die Tourbiz-Widgets sind keine iframes. Es handelt sich um JavaScript-Skripte, die direkt in das DOM Ihrer Seite eingefügt werden. Das bietet mehrere wichtige Vorteile:

• CSS-Vererbung: Das Widget übernimmt automatisch die Stile Ihrer Website (Schriftarten, Farben, Buttons…) und gewährleistet so eine visuell stimmige Integration ohne zusätzliche Anpassungsebene.
• Native JavaScript-Interaktion: Das Widget kann mit Ihrer Seite kommunizieren (Events, Tracking, Analytics) wie jede native Komponente.
• Keine Probleme mit dynamischer Höhe: Im Gegensatz zu iframes passt sich die Höhe ganz natürlich an den Inhalt an, ohne zusätzliches JavaScript.

Ein Widget erstellen

Widget Kalender

Dieses Widget zeigt einen Verfügbarkeitskalender für ein bestimmtes Produkt an, mit Auswahl von Datum, Uhrzeit und Mengen.

Schritte:

1. Wählen Sie den Typ „Kalender“ im Dropdown-Menü.
2. Wählen Sie die Anzeigesprache.
3. Wählen Sie das betreffende Produkt aus — eine Vorschau wird sofort rechts angezeigt.
4. Geben Sie die URL der Warenkorbseite an (z. B.: https://www.ihreseite.de/warenkorb). Diese URL ist unerlässlich: Zu dieser Seite wird der Kunde nach dem Klick auf „In den Warenkorb“ weitergeleitet, und dort muss das Warenkorb-Widget eingebunden sein.
5. Kopieren Sie den generierten Code und binden Sie ihn in Ihre Seite ein.

Produkt nicht in der Liste zu finden? Prüfen Sie, ob Sie es im Reiter Online-Verkauf > API aktiviert haben. Nur die in diesem Reiter aktivierten Produkte sind über die Widgets und die API verfügbar. Diese bewusste Aktivierung ermöglicht es Ihnen, bestimmte Produkte „offline“ zu halten — nicht online vertreibbar — während Sie sie dennoch in Ihrem internen Katalog behalten.

Widget Warenkorb

Dieses Widget zeigt den Warenkorb an und ermöglicht es dem Kunden, seine Bestellung abzuschließen.

Schritte:

1. Wählen Sie den Typ „Warenkorb“.
2. Wählen Sie die Sprache entsprechend der Seite, in die es eingebunden wird.
3. Kopieren Sie den generierten Code und fügen Sie ihn direkt auf Ihrer Warenkorbseite ein.

Das war’s! Das Widget übernimmt automatisch die über das Kalender-Widget hinzugefügten Artikel.

Widget Geschenkgutschein einlösen

Mit diesem Widget können Ihre Kunden die Referenz eines Geschenkgutscheins eingeben, um ihn bei einem Kauf zu verwenden.

Schritte:

1. Wählen Sie den Typ „Geschenkgutschein einlösen“.
2. Wählen Sie die Sprache.
3. Geben Sie die URL der Bestätigungsseite an (z. B.: https://www.ihreseite.de/gutscheineingeloest). Diese URL ist Pflicht: Dorthin wird der Kunde nach der Validierung seines Geschenkgutscheins weitergeleitet.
4. Kopieren Sie den generierten Code und binden Sie ihn auf der dafür vorgesehenen Seite Ihrer Website ein.

Widget Produktliste und Kalender

Dieses Widget kombiniert eine Produktliste mit einem interaktiven Kalender. Es ist ideal, wenn Sie mehrere Produkte auf derselben Seite anbieten und den Nutzer auswählen lassen möchten.

Funktionsweise:

• Links wird eine Produktliste angezeigt.
• Wenn der Nutzer auf ein Produkt klickt, aktualisiert sich der Kalender rechts automatisch, um die Verfügbarkeiten dieses Produkts anzuzeigen.

Schritte:

1. Wählen Sie den Typ „Produktliste und Kalender“.
2. Wählen Sie die Sprache.
3. Wählen Sie die einzubindenden Produkte aus (Mehrfachauswahl möglich).
4. Geben Sie die URL der Warenkorbseite an.
5. Kopieren Sie den generierten Code und binden Sie ihn in Ihre Seite ein.

Zusammenfassung