Widget Integration

Damit sich dein Widget optimal in das Design deiner Webseite einfügt, kannst du das Aussehen deines Widgets weitreichend anpassen. Das funktioniert auch nachdem du den Code-Schnipsel bereits in deiner Webseite integriert hast.

Gehe in die Einstellungen unter Integration und dort auf den Bearbeiten Button des Widgets. Im Menüpunkt Design kannst du entscheiden, ob dein Widget im Hell- oder Dunkelmodus dargestellt werden soll, welche Farben genutzt werden, ob Rahmen eckig oder rund sein sollen und noch einiges mehr.

Tipp: Du kannst beliebig viele Widgets für einen Betrieb erstellen und so Integrationen mit unterschiedlichen Designs anlegen.

Verwaltest du in deinem Teburio Account mehre Betriebe, steht dir außerdem das Multi Widget zur Verfügung. Dieses ermöglicht es Online-Reservierungen für mehrere Betriebe in einer Integration zu kombinieren.

In den Einstellungen unter Integration kannst du über den Button +Multi Widget hinzufügen ein neues Multi Widget anlegen und anschließend mit einem Klick auf bearbeiten wählen, welche deiner Betriebe integriert werden sollen.

Über URL-Parameter kannst du dein Widget noch weiter anpassen, Felder vorausfüllen, die Sprache des Widgets steuern oder die Quelle einer Reservierung übergeben. Die URL-Parameter werden im Format Parameter=Wert getrennt durch ein Fragezeichen an die URL im Code-Schnipsel oder auch an deinen Reservierungslink angehängt. Die Parameter-Werte-Paare werden jeweils durch ein Et-Zeichen (&) getrennt.

URL für den Code-Schnipsel
https://static.teburio.de/w2.js?id=[deine ID]&parameter1=wert1&parameter2=wert2...

URL für den Reservierungslink
https://app.teburio.de/widget/[deine ID]?parameter1=wert1&parameter2=wert2...

Beispiel

Parameter:

• Meine ID: SETabyjuNCiaR22
• people=2
• date=2024-12-03

URL für den Code-Schnipsel
https://static.teburio.de/w2.js?id=SETabyjuNCiaR22&people=2&date=2024-12-03

URL für den Reservierungslink
https://app.teburio.de/widget/SETabyjuNCiaR22?people=2&date=2024-12-03

Normalerweise füllt der Nutzer die Felder in deinem Widget aus. Du kannst für die meisten Felder aber auch einen Standardwert vorgeben, z.B. 2 Personen oder ein Datum. Letzteres bietet sich an, wenn du z.B. eine Einladung zu einem bestimmten Event verschickst. Vielleicht sind dir auch Daten wie Name oder E-Mailadresse deiner Nutzer bereits bekannt, weil sie sich auf deiner Webseite/App eingeloggt haben.

Folgende Parameter sind möglich, spezielle Zeichen in den Werten müssen dabei immer kodiert werden:

Mit Hilfe von URL-Parametern lässt sich außerdem das Design deines Widgets anpassen. Diese Anpassungen überschreiben das Design, welches in den Teburio Einstellungen konfiguriert wurde.

Über den URL-Parameter lang kannst du die Sprache steuern, in der das Widget ausgegeben wird. So lässt es sich z.B. realisieren, dass sich die Sprache im Widget automatisch mit der Sprache der Webseite anpasst.

Hängst du deiner URL die folgenden Tracking Parameter an, kann für jede Reservierung nachvollzogen werden, woher die Reservierung stammt. Nutzt du z.B. für eine Marketingkampagne spezifische Parameter, kannst du nachher nachvollziehen, wie viele Reservierungen aufgrund der Kampagne getätigt wurden.

Das Widget informiert die übergeordnete Webseite, in die es integriert ist, über wichtige Events während des Reservierungsprozesses. Diese Events können z.B. genutzt werden, um Events in Analayse- oder Marketing-Tools auszulösen oder Conversions zu erfassen.

Folgende Events werden gesendet, wenn ein Nutzer dem Reservierungsprozess folgt. Je nachdem wie du deine Online-Reservierung konfiguriert hast, werden nicht unbedingt alle Schritte durchlaufen:

Mit dem Google Tag Manager ist es einfach möglich, die vom Widget gesendeten Events auszulesen und z.B. an Google Analytics, den Facebook Pixel oder andere Tools weiterzuleiten.

Schritte:

1. Stelle sicher, dass der Google Tag Manager in deiner Webseite eingebunden ist.
2. Ergänze im Teburio Code-Schnipsel die URL um den URL-Parameter &dl=1, damit die Events an die Datenschicht (dataLayer) deiner Webseite übergeben werden.
3. Lege im Google Tag Manager für jedes Event, das du tracken möchtest, einen Trigger vom Typ „Benutzerdefiniertes Ereignis“ an und trage als Ereignisname den Eventnamen ein.
4. Diesen Trigger kannst du jetzt verwenden, um ein beliebiges Event zu Google Analytics oder auch zum Facebook Pixel zu senden.
5. Dort lassen sich die Events wiederum für verschiedene Auswertungen, das Conversion Tracking oder z.B. das Erstellen von Zielgruppen für Marketing Kampagnen nutzen.

Für das Senden der Events an die einbettende Webseite nutzen wir window.postMessage(). Die Events können auch per JavaScript ausgelesen werden und so als Trigger für Folgeaktionen dienen.

Das übergebene Event ist ein JavaScript Objekt im folgenden Format, wobei XXX dem Namen des Events entspricht.

{ event: 'teburio.XXX' }

Das folgende JavaScript Beispiel empfängt die vom Widget gesendeten Events und gibt den Event Namen in der Konsole aus.