Web-Komponente

Diese Seite beschreibt, wie das Buchungswidget auf der eigenen Webseite integriert werden kann und wie Inhalte oder Daten vorbefüllt werden können.

Es ist möglich, Daten ans Buchungswidget zu übermitteln um so Inhalte vorzubefüllen oder Einträge vorzuselektieren.

Die jeweiligen IDs können unter https://dashboard.calenso.com nachgeschlagen werden. Klicke dazu auf "Bearbeiten", dann wird die ID des jeweiligen Elementes angezeigt.

Es ist möglich, das Design des Buchungswidget über CSS anzupassen. Calenso übernimmt dafür jedoch kein Gewähr. Es kann sein, dass nach einem Update des Buchungswidget das Design nicht mehr funktioniert oder schlecht aussieht. Darüberhinaus kann es sein, dass die Webseite, welche das Buchungswidget integriert, Funktionen überschreibt, so dass ein korrektes Funktionieren nicht mehr möglich ist. In diesem Fall rät Calenso, das Buchungswidget über ein iFrame zu integrieren.

🖊️ Buchungswidget integrieren

Integriere im <head> Bereich deiner Webseite folgende 2 Skripte. Diese stellen sicher, dass die Webseite die Calenso-Webkomponente kennt. Darüberhinaus werden sogenannte Polyfills geladen, damit die Web-Komponente korrekt geladen werden kann.

<script type="text/javascript" src="https://webcomponent.widget.calenso.com/html-imports.js"></script>

<link rel="import" href="https://webcomponent.widget.calenso.com/booking.html">

Lade anschliessend die Web-Komponente an der gewünschten Stelle auf deiner Webseite:

<calenso-booking partner="DEIN-CALENSO-BUCHUNGSNAME" type="any" lang="de_CH"></calenso-booking>

Du findest deinen Calenso Buchungsname unter https://dashboard.calenso.com/app/settings (Buchungslink)

🏢 Partner-Kontext setzen

Damit das Buchungswidget dich als Partner identifizieren kann, musst du deinen Buchungsname im "partner" Attribut setzen.

partner="calenso"

Wenn kein Partner definiert ist, dann wird ein Fehler ausgegeben.

↔️ Buchungswidget-Typ definieren

Es gibt 2 Buchungswidgets. Einmal für den normalen Terminbuchungsfall, und andererseits für den Gruppenterminbuchungsfall.

Mögliche Werte:

  • any

  • appointment

  • event

Wenn du "any" als Typ definierst, dann wird im Buchungswidget eine Auswahl angezeigt. So kann der Kunde zwischen dem Termin- und Gruppentermin Case wählen.

type="appointment"

Standard-Wert: appointment

🇨🇭Sprache definieren

Das Calenso-Buchungswidget unterstützt 8 Sprachen. Du kannst die Sprach als Parameter an die Web-Komponente übergeben.

Mögliche Werte:

  • de_CH (Deutsch)

  • fr_CH (Französisch)

  • it_CH (Italienisch)

  • en_US (Englisch)

  • nl_NL (Niederländisch)

  • fi_FI (Finisch)

  • po_PO (Polnisch) (ab v4.54.0)

  • es_ES (Spanisch( ab v4.55.0)

lang="de_CH"

Standard-Wert: de_CH

⛔ Sprach-Switcher verstecken

Wenn du bspw. die Sprach über den oberen lang-Parameter vorbefüllst, kann es manchmal notwendig sein, dass du den Sprach-Switcher verstecken möchtest.

lang-switcher="false"

Standard-Wert: true

↔️ Internes oder externes Buchungswidget

Standardmässig lädt Calenso das externe Buchungswidget, welches für deine Kunden gedacht ist. Es ist jedoch auch möglich, das interne Buchungswidget zu laden. Dies bringt folgende Funktionen:

  • Interne Dienstleistungen werden angezeigt

  • Am Schluss der Buchung kannst du nach bestehenden Kunden suchen und diese auswählen

Um das interne Buchungswidget zu laden, füge bitte folgenden Parameter hinzu:

internal="true"

Standard-Wert: true

Um das interne Buchungswidget zu laden, füge bitte folgenden Parameter hinzu:

internal=true

Standard-Wert: true

Aus Sicherheitsgründen benötigt das interne Buchungswidget einen Verifizierungstoken. Dieser kann wie folgt definiert werden:

token="906e6397-49b0-4c7f-b3f4-317b17b6141d"

Du bekommst deinen Verifizierungstoken vom Calenso Support.

🏢 Filiale vorselektieren

Es ist möglich, die zu buchende Filiale über deren Postleitzahl zu vorzuselektieren.

selected-store-zip="6203"

Es ist möglich, die zu buchende Filiale über die Filialen-ID vorzuselektieren.

selected-store-id="100"

Nebst der Filialen-ID ist es auch möglich, die Filiale über den Namen vorzuselektieren.

selected-store-name="Office Sempach Station"

⬇️ Dienstleistungskategorie vorselektieren

Es ist möglich, eine oder mehrere Dienstleistungskategorien vorzuselektieren, bzw. zu aktivieren. Nicht angegebene Dienstleistungskategorien werden für den jeweiligen Link nicht angezeigt. 

selected-appointment-service-category-ids="100,101,102"

Die ID einer Dienstleistungskategorie kann in den Einstellungen gefunden werden, öffne dazu "Dienstleistungskategorie bearbeiten".

🔠 Dienstleistungen vorselektieren

Es ist möglich, eine oder mehrere Dienstleistungen vorzuselektieren.

selected-appointment-service-ids="4493"

🧑 Buchbare Mitarbeiter oder Ressourcen vorselektieren

Es ist möglich, eine buchbare Ressource oder einen Mitarbeiter vorzuselektieren.

selected-worker-id="100" 

or

selected-worker-email="john.smith@apple.com"

🙋 Buchungsfragen vorbefüllen

Es ist möglich, eine oder mehrere Buchungsfragen am Ende des Buchungsvorganges vorzubefüllen.

selected-custom-fields='{"100":"Ich habe euch via Google gefunden", "101": "Zweiter Wert"}'

🧑 Kunden-Informationen vorbefüllen

Es ist möglich, Kundendaten im letzten Buchungsschritt vorzubefüllen.

Vorname:

selected-customer='{"prename": "John"}'

Nachname:

selected-customer='{"lastname": "Smith"}'
selected-customer='{"title": 1}'

Mögliche Werte:

  • 0 = Keinen Titel

  • 1 = Dr.

  • 2 = Dr. med.

  • 3 = Prof.

selected-customer='{"company": "Calenso AG"}'

E-Mail Adresse:

selected-customer='{"email": "john.smith@gmail.com"}'

Telefonnummer:

selected-customer='{"mobile": "+41797896541"}'

Geschlecht:

selected-customer='{"gender": "m"}'

Mögliche Werte:

  • m = Mann

  • f = Frau

  • o = Andere

Strasse:

selected-customer='{"street": "Neuenkirchstrasse 19"}'

Postleitzahl:

selected-customer='{"zip": "6203"}'

Stadt:

selected-customer='{"city": "Sempach-Station"}'
selected-customer='{"country": 1}'

Mögliche Werte:

  • 1 = Schweiz

  • 2 = Deutschland

  • 3 = Frankreich

  • 4 = Italien

  • 5 = Spanien

  • 6 = Portugal

  • 7 = USA

  • 10 = Österreich

  • 11 = England

  • 12 = Finnland

  • 13 = Norwegen

  • 14 = Schweden

  • 15 = Estland

  • 16 = Russland

  • 17 = Tschechien

  • 18 = Griechenland

  • 19 = Ägypten

  • 20 = Brasilien

  • 21 = Zypern

  • 22 = Liechtenstein

  • 23 = Belgien

  • 24 = Niederlande

  • 25 = Luxenburg

Bemerkung (Kommentar):

selected-customer='{"comment": "Lorem Ipsum"}'

Benachrichtigungseinstellung:

customer-notification-preference="email"

Mögliche Werte:

  • email = E-Mail

  • sms = SMS

  • both = E-Mail & SMS

Meeting-Anbieter:

meeting-type-id="3"

Mögliche Werte:

  • 1 = Vor Ort (Filiale)

  • 2 = Zoom-Meeting

  • 3 = Calenso Meeting

  • 4 = Telefon

  • 5 = Beim Kunden

  • 6 = Unblu

  • 7 = Microsoft Teams

  • 8 = Google Meet

  • 9 = GoTo Meeting

  • 10 = Cisco Webex

  • 11 = Wir rufen sie an

Interner Kommentar:

internal-comment="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."

🔐 Übergebene Werte Base64 encodieren

Damit die übergebenen Werte nicht direkt in der URL sichtbar sind, können diese mit Base64 encodiert werden. Das Buchungswidget dekodiert diese Werte anschliessend und verarbeitet sie.

q="c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw=="

📅 Auswählbare Tage einschränken

Es ist möglich, die buchbaren Tage einzuschränken, indem ein Kontext-Datum übergeben wird inkl. wieviele Tage davor und danach selektierbar sind.

date-context="2021-10-31"
date-context-start="5"
date-context-end="14"

👩 Mitarbeiter speichern, welcher Buchung vorgenommen hat

Wenn gespeichert werden soll, welcher eingeloggte Mitarbeiter den Termin gebucht hat, dann kann man booker_worker_id setzen. Im Fall des internen Buchungswidget wird dieser Wert automatisch gesetzt, sobald ein Mitarbeiter eingeloggt ist. Andernfalls muss dieser Wert manuell als Parameter gesetzt werden.

booker-worker-id="1000"

⬇️ UTM-Parameter (Analyse)

UTM-Parameter (Urchin Traffic Monitor) sind spezielle URL-Parameter (z. B. utm_source und utm_medium), die am Ende einer URL hinzugefügt werden können, um die Leistung einer Internetseite in Analysewerkzeugen wie z. B. Google Analytics zu verfolgen. Wenn ein Link mit UTM-Parametern aufgerufen wird, werden die Parameter an Google Analytics zurückgesendet, wo sie verwendet werden können, um die Quelle, das Medium und andere Aspekte des Verweisverkehrs auf die Website zu verfolgen. Diese Informationen können verwendet werden, um den Inhabern der Internetseite und/oder Werbetreibenden beim Verstehen, woher Besucher kommen, welche Arten von Inhalten oder Kampagnen am effektivsten sind und wie die Leistung der Seite verbessert werden kann, zu helfen (Quelle: Wikipedia).

Die UTM-Parameter sind im Terminexport (Excel) und in Webhooks für weitere Auswertungen verfügbar.

utm_source=google.com
utm_medium=cpc
utm_campaign=summersale24
utm_term=appointment
utm_content=textlink

🦘 Ersten Buchungsschritt überspringen (direkt zur Kalenderauswahl)

Es ist möglich, den ersten Schritt zu überspringen, indem man die Filiale, den Mitarbeiter und die zu buchende Dienstleistung vorbefüllt:

selected-store-id="100"
selected-worker-id="100"
selected-appointment-service-ids="100"

🖼️ Anzeige-Modus im Gruppentermin-Widget ändern

Das Gruppentermin-Widget unterstützt die Listen und die Raster Ansicht. Mit folgendem Parameter kann zwischen der Ansicht gewechselt werden:

ui-mode="grid"
or
ui-mode="list"

🔀 Anzeige-Modus Switcher im Gruppentermin-Widget deaktivieren

Der Switcher, welcher es ermöglicht von "Liste" zu "Raster" zu wechseln, kann wie folgt deaktiviert werden:

hide-grid-switcher="true"

🗓️ Datum vorselektieren

Seit v4.46.0

Der Datumsparameter ermöglicht es, eine spezifischen Tag im Kalender vorzuselektieren, so dass dein Kunde nur noch das jeweilige zu buchende Zeitfenster auswählen muss.

Voraussetzungen:

  • Mitarbeiter ist vorselektiert

  • Dienstleistung ist vorselektiert

date="2023-06-30"

🎨 Vorlage definieren

Wenn benutzerdefinierte CSS-Vorlagen vorhanden sind, dann können diese über diesen Parameter gesetzt werden. Das Buchungswidget wird anschliessend mit dem jeweiligen definierten CSS dargestellt. Die Template UUID findest du hier raus.

Voraussetzungen:

  • Business- oder Enterprise Abonnement

template="b201dd38-9bdc-4b8f-b993-dd0bc06ad53c"

📄 Komplettes Beispiel für die Integration einer Web-Komponente

<calenso-booking
    partner="calenso"
    type="any"
    internal="false"
    booker-worker-id="1000"
    selected-store-id="2835"
    selected-store-name="Office Sempach Station"
    selected-appointment-service-category-ids="100,101,102"
    selected-appointment-service-ids="4493"
    selected-worker-id="38847"
    selected-custom-fields='{"3571":"123456789"}'
    selected-customer='{"title": 1, "prename": "max", "lastname": "muster", "email": "max@muster.ch", "mobile": "+41764171234", "gender": "m", "street": "Mainstreet", "zip": "8000", "city": "Zurich", "country": 1, "comment": "Ich freue mich auf den Besuch", "company": "Calenso AG"}'
    date-context="2021-12-31"
    date-context-start="5"
    date-context-end="14"
    customer-notification-preference="email"
    meeting-type-id="3"
    utm-source="Instagram"
    lang-switcher="false"
    lang="de_CH"
    q="null"
    hide-gride-switcher="true"
    token="906e6397-49b0-4c7f-b3f4-317b17b6141d"
    ui-mode="list"
    date="2023-06-30"
    template="b201dd38-9bdc-4b8f-b993-dd0bc06ad53c">
 </calenso-booking>

❌ Buchungswidget-Fehler

Wenn kein Abonnement gesetzt ist, dann wird folgender Fehler angezeigt. Dieser Fehler kann auch auftauchen, wenn die Kreditkarte 3-mal nicht belastet werden konnte. In dem Fall wird das Abonnement gelöscht und das Buchungswidget wird deaktiviert.

Leider konnte kein Abonnement gefunden werden. Bitte kontaktieren den Calenso-Support.

Der Calenso-Support kann das Buchungswidget deaktivieren, z.B. dann wenn die offenen Rechnungen nicht bezahlt wurden:

Das Buchungswidget wurde deaktiviert. Sobald ein Calenso Abo Upgrade durchgeführt ist, wird das Widget wieder freigeschalten.

Wenn keine buchbare Ressource/Mitarbeiter gefunden werden kann, dann wird folgende Fehlermeldung angezeigt:

Es wurde keine buchbare Dienstleistung erfasst. Bitte stelle sicher, dass mindestens eine Dienstleistung vorhanden ist und diese einer buchbaren Ressource zugewiesen ist (Fähigkeit). Das Erfassen einer Dienstleistungskategorie reicht nicht aus, um buchbar zu sein.

🤝 Brauchst du Hilfe?

Wir sind jederzeit unter support@calenso.com für dich da!

PreviousCalenso BuchungsseiteNextiFrame

Last updated