Zurück zur Startseite

Zeitplanr einbetten

Buchungs-Widget zu Ihrer Webseite hinzufügen

Konfiguration

Passen Sie Ihre Einbettungs-Einstellungen an

Methode 1: Einfacher iframe

Einfache Einbettung mit einem iframe. Kein JavaScript erforderlich.

<iframe
  src="/embed/IHR-BENUTZERNAME"
  width="100%"
  height="600"
  frameborder="0"
  scrolling="no"
></iframe>

Methode 2: Auto-Initialisierungs-Skript

Fügen Sie Daten-Attribute hinzu und das Skript übernimmt die Initialisierung.

<!-- Zu Ihrem HTML hinzufügen -->
<div id="zeitplanr-widget"
  data-username="IHR-BENUTZERNAME"
></div>
<script src="/embed.js"></script>

Methode 3: JavaScript-API

Volle Kontrolle mit Callbacks für Buchungsereignisse.

<script src="/embed.js"></script>
<script>
  Zeitplanr.init({
    container: '#booking-container',
    username: 'IHR-BENUTZERNAME',
    onBookingCreated: function(booking) {
      console.log('Buchung erstellt:', booking);
    },
    onError: function(error) {
      console.error('Buchungsfehler:', error);
    }
  });
</script>

JavaScript-API-Referenz

Konfigurationsoptionen

container - CSS-Selektor oder DOM-Element

username - Ihr Zeitplanr-Benutzername (erforderlich)

eventType - Bestimmter Termintyp-Slug (optional)

hideHeader - Termininfo-Kopfzeile ausblenden (Standard: false)

hideBranding - „Powered by" ausblenden (Standard: false)

primaryColor - Benutzerdefinierte HSL-Farbe (z.B. „210 40% 50%")

minHeight - Minimale iframe-Höhe in Pixeln (Standard: 400)

Callbacks

onReady(data) - Widget geladen und bereit

onStepChange(step) - Buchungsschritt geändert (Datum/Uhrzeit/Formular)

onDateSelected(date) - Benutzer hat ein Datum ausgewählt

onTimeSelected(slot) - Benutzer hat ein Zeitfenster ausgewählt

onBookingCreated(booking) - Buchung erfolgreich erstellt

onError(message) - Ein Fehler ist aufgetreten

Methoden

widget.destroy() - Widget aus dem DOM entfernen

widget.reload() - Widget neu laden