Clasora

Den Terminplaner auf Ihrer Website einbetten

Integrationen

Über Einstellungen → Integrationen können Besucher direkt auf Ihrer eigenen Website buchen, und zwar mit einem eingebetteten Terminplaner, statt hierher geschickt zu werden.

1. Ihre Domain freigeben

Tragen Sie unter Erlaubte Domains den exakten Origin der Website ein, die den Terminplaner zeigen soll, also nur Schema und Host, ohne Pfad und ohne abschließenden Schrägstrich:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  Schema fehlt
https://acme.com/book      ✗  enthält einen Pfad
https://acme.com/          ✗  Schrägstrich am Ende

https://www.acme.com und https://acme.com sind verschiedene Origins. Ist Ihre Website über beide erreichbar, tragen Sie beide ein.

Diese Liste ist zugleich der Ein-/Ausschalter: solange sie leer ist, lässt sich Ihr Terminplaner nirgends einbetten. Möglich sind bis zu 50 Domains; das Entfernen wirkt sofort.

2. Code-Schnipsel einfügen

Jede freigegebene Leistung hat ihren eigenen Schnipsel. Kopieren Sie ihn und fügen Sie ihn dort in Ihre Seite ein, wo der Terminplaner erscheinen soll:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

Das <div> markiert die Stelle; das script-Tag kann überall auf der Seite stehen und muss nur einmal vorkommen, auch bei mehreren Terminplanern. Steht dort noch keine freigegebenen Leistungen zum Einbetten, ist die Leistung noch in Prüfung. Ihr Schnipsel erscheint nach der Freigabe.

3. Sprache festlegen

Sprache des Widgets auf dieser Seite bestimmt, was Besucher sehen. Belassen Sie es auf Sprache der Seite übernehmen, dann liest der Terminplaner das lang-Attribut im <html>-Tag Ihrer Seite, also dasselbe Attribut, das Suchmaschinen und Screenreader nutzen. Eine sauber lokalisierte Website braucht damit keine weitere Konfiguration:

<!doctype html>
<html lang="es">      <!-- Terminplaner erscheint auf Spanisch -->
  <head>…</head>
  <body>…</body>
</html>

Regionale Kennungen funktionieren: lang="pt-BR" wird auf die nächstliegende unterstützte Sprache reduziert statt abgelehnt.

Um die Seitensprache für einen einzelnen Terminplaner zu übergehen, setzen Sie data-locale auf das Einbettungs-Div. Es schlägt sowohl die Seitensprache als auch die Einstellung auf dieser Seite:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

Hat Ihre Seite eine eigene Sprachumschaltung, lassen Sie den Terminplaner ihr folgen. Der Wechsel erfolgt an Ort und Stelle, bereits Eingegebenes bleibt erhalten:

window.SchedulerEmbed.setLocale("sr");

Kurz gesagt gewinnt das Erste, das gesetzt ist: data-locale, dann das <html lang> Ihrer Seite, dann Sprache des Widgets, dann der Browser des Besuchers, dann Englisch.

Weitere Optionen

Ergänzen Sie diese am Einbettungs-Div:

data-mode="popup" zeigt eine Schaltfläche, die den Terminplaner in einem Overlay öffnet, statt ihn direkt einzubetten.

data-label="Jetzt buchen" setzt den Text der Schaltfläche im Popup-Modus.

data-min-height="480" setzt die Höhe in Pixeln, bevor der Terminplaner seine tatsächliche Größe meldet. Erhöhen Sie sie, wenn es beim Laden springt.

Zwei weitere Aufrufe stehen bereit, wenn Ihre Website Inhalte dynamisch einfügt oder Conversions misst:

// Seite nach dem Einfügen eines Terminplaner-Divs erneut durchsuchen
window.SchedulerEmbed.refresh();

// Wird ausgelöst, wenn ein Besucher eine Buchung abschließt
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

Wenn der Terminplaner nicht lädt

Der Origin der Seite steht nicht auf der Liste oder stimmt nicht exakt überein. Schon http statt https oder ein fehlendes www blockiert ihn.

Der Schnipsel ist an einer Stelle gelandet, an der das Skript nicht laufen darf, etwa in einem Klartext- oder eingeschränkten HTML-Block Ihres Website-Baukastens.

Der Wert von data-service wurde verändert. Fügen Sie den Schnipsel unverändert ein, statt die ID abzutippen.

Die Leistung wurde zurückgezogen oder ist nicht mehr freigegeben.