Zum Hauptinhalt springen

Zeeg auf deiner Website einbetten

Durch das Einbetten deiner Zeeg-Seiten in deine Website können Besucher direkt Termine buchen, ohne deine Seite zu verlassen.

Verfasst von Fernando Figueiredo

Einbetten deiner Zeeg-Terminseite auf deiner Website Um deine Zeeg-Terminseite einzubetten, folge diesen Schritten:

  1. Gehe in deinem Dashboard zur Terminseite, die du einbetten möchtest, klicke darauf und wähle Teilen.

  2. Wähle im geöffneten Fenster Zur Website hinzufügen.

  3. Klicke auf Kopieren und füge dann den Code in deine Website ein.

Um dein Profilbild, Namen, Termindauer, Ort und Beschreibung beim Einbetten deiner Terminseite auszublenden, wähle Details ausblenden.

Personalisierung des Einbettungscodes

Nutzer mit einem kostenpflichtigen Abonnement können zusätzliche Farboptionen verwenden, darunter Hintergrund-, Text-, Schaltflächen- und Linkfarbe.

Sobald du mit deinen Anpassungen zufrieden bist, kopiere einfach den Code und füge ihn in deine Webseite ein.

URL-Weiterleitung bei der Einbettung von Zeeg in deine Website

Wenn ein Teilnehmer über die Zeeg-Einbettung auf deiner Website einen Termin vereinbart und du eine URL-Weiterleitung für die Bestätigungsseite aktiviert hast, erfolgt die Weiterleitung standardmäßig innerhalb des iFrame-Bereichs und nicht auf der übergeordneten Seite.

Wenn du die übergeordnete Seite umleiten möchtest, füge data-redirect-parent="true" zu deinem Einbettungsskript hinzu, wie unten gezeigt:
​

<!-- Zeeg inline embed begins --><div class="zeeg-inline-widget" id="zeeg-embed-demo-hr-30min" style="min-width: 320px; height: 780px"></div><script type="text/javascript" src="https://assets.zeeg.me/embed.min.js" data-user="demo" data-event-type="hr-30min" data-redirect-parent="true" async></script><!-- Zeeg inline embed ends -->

Auf Buchungen auf deiner Seite reagieren

Deine Zeeg-Einbettung teilt der Seite, auf der sie eingebunden ist, mit, wenn Eingeladene buchen, umbuchen oder absagen. Du kannst auf diese Nachrichten reagieren, um eigene Analytics-Ereignisse auszulösen, eine Dankesnachricht anzuzeigen oder deine Website zu aktualisieren – ganz ohne zusätzliche Einrichtung in Zeeg.

Diese Nachrichten richten sich an Entwickler oder an alle, die den Code deiner Website verwalten. Sie erreichen jede Seite, die deine Terminseite einbettet. Behandle sie daher nie als Geheimnis.

Die eingebettete Terminseite sendet eine standardmäßige Browser-Nachricht (message) an die Seite, die sie enthält. Jede Nachricht hat einen event-Namen und bei den folgenden Ereignissen einen payload mit Details zur Buchung.

Ereignis

Wann es gesendet wird

zeeg.booking_confirmed

Eingeladene schließen die Buchung eines neuen Termins ab (bei kostenpflichtigen Terminen nach abgeschlossener Zahlung).

zeeg.booking_rescheduled

Eingeladene schließen die Umbuchung eines Termins ab. Es wird anstelle von zeeg.booking_confirmed gesendet und teilt dir zusätzlich mit, welche Buchung ersetzt wurde.

zeeg.booking_cancelled

Eingeladene sagen einen Termin über die in der Einbettung angezeigte Absageseite ab.

Was der Payload enthält

  • zeeg.booking_confirmed und zeeg.booking_rescheduled: inviteeUuid (die ID der Buchung), hostName, hostNames (alle Hosts), status, title, startAt, endAt, timeZone und payment (gateway, price und currency, bzw. null bei kostenlosen Terminen).

  • zeeg.booking_rescheduled enthält zusätzlich previousInviteeUuid, die ID der Buchung, die durch die neue ersetzt wird.

  • zeeg.booking_cancelled: nur inviteeUuid, die ID der abgesagten Buchung.

Name, E-Mail-Adresse und Telefonnummer der Eingeladenen sowie die Antworten auf Buchungsfragen sind nicht enthalten.

Beispiel
​

<script> window.addEventListener('message', function (e) { /* Only trust messages from the Zeeg booking page */ if (e.origin !== 'https://zeeg.me') return; if (!e.data || typeof e.data.event !== 'string') return; if (e.data.event === 'zeeg.booking_confirmed') { console.log('New booking', e.data.payload.inviteeUuid, e.data.payload.startAt); } if (e.data.event === 'zeeg.booking_rescheduled') { console.log('Replaced', e.data.payload.previousInviteeUuid, 'with', e.data.payload.inviteeUuid); } if (e.data.event === 'zeeg.booking_cancelled') { console.log('Cancelled', e.data.payload.inviteeUuid); } }); </script>

Häufig gestellte Fragen

Werden die Nachrichten gesendet, wenn ich die Terminseite direkt und nicht eingebettet öffne?

Nein. Die Nachrichten werden nur gesendet, wenn deine Terminseite als Einbettung (iframe) auf einer anderen Seite angezeigt wird.

Werden die Nachrichten erneut gesendet, wenn jemand die Bestätigungs- oder Absageseite neu lädt oder erneut aufruft?

Nein. Zeeg sendet zeeg.booking_confirmed und zeeg.booking_rescheduled nur einmal, und zwar für die Buchung, die gerade in diesem Browser-Tab vorgenommen wurde. Das spätere Öffnen einer bestehenden Buchung löst nichts aus. zeeg.booking_cancelled wird gesendet, wenn Eingeladene absagen, nicht beim Laden der Seite. Wenn du eine bereits abgesagte Buchung erneut aufrufst, wird die Nachricht also nicht noch einmal gesendet.

Wird eine Nachricht gesendet, wenn ich als Host einen Termin umbuche oder absage?

Bei Umbuchungen nicht. zeeg.booking_rescheduled wird nur gesendet, wenn Eingeladene in der Einbettung umbuchen, da Hosts über das Dashboard umbuchen. Hosts sagen auch nicht über die eingebettete Seite ab, daher wird bei Absagen durch den Host keine zeeg.booking_cancelled-Nachricht gesendet.

Was passiert, wenn die Zahlung nicht abgeschlossen wird?

Bei kostenpflichtigen Terminen werden die Buchungsnachrichten gesendet, nachdem Eingeladene mit einer abgeschlossenen Buchung von der Zahlungsseite zurückkehren. Wird die Zahlung nie abgeschlossen, wird keine Buchungsnachricht gesendet.

Ist es sicher, inviteeUuid zu speichern oder zu protokollieren?

Behandle inviteeUuid wie einen privaten Link. Wer die ID hat, kann die Buchungsdetails ansehen und die Buchung ohne Anmeldung absagen. Gib sie nicht auf öffentlichen Seiten, in mit Dritten geteilten URLs oder in Analytics-Tools weiter, die du nicht kontrollierst. Prüfe in deinem Listener immer e.origin, damit nur Nachrichten der Zeeg-Terminseite verwendet werden.

Muss ich meinen Einbettungscode ändern?

Nein. Die Nachrichten werden von deiner bestehenden Zeeg-Einbettung gesendet. Du musst nur einen Listener zu deiner Seite hinzufügen.

Hat dies deine Frage beantwortet?