Übermittlung von Daten ans Buchungswidget (Kontextabhängiges Buchungswidget)

INHALTSVERZEICHNIS

• Unterstützte Parameter
• Beispiel 1: Webkomponente
• Beispiel 2: iFrame

Es ist möglich, Daten via URL ans Buchungswidget zu übergeben. Im folgenden Supportartikel beschreiben wir diese Funktionalität.

Unterstützte Parameter

Filiale vorselektieren mit ID

Name des Parameters: store_id
Beschreibung: Filiale vorselektieren
Beispiel:

• iFrame: store_id=100
• Webkomponente: selected-store-id="100"

Filiale vorselektieren mit Name der Filiale

Name des Parameters: store_name
Beschreibung: Filiale vorselektieren (wenn ID nicht vorhanden ist)
Beispiel:

• iFrame: store_name=Office&20Sempach%20Station
• Webkomponente: selected-store-name='Office Sempach Station'

Dienstleistungen vorselektieren

Name des Parameters: service[]
Beschreibung: Dienstleistungen vorselektieren
Beispiel:

• iFrame: service[]=100,101,102
• Webkomponente: selected-appointment-service-ids='100,101,102'

Buchbare Ressource vorselektieren

Name des Parameters: worker_id
Beschreibung: Buchbare Ressource vorselektieren (z.B. Mitarbeiter)
Beispiel:

• iFrame: worker_id=100
• Webkomponente: selected-worker-id='100'

Buchungsfragen vorbefüllen

Name des Parameters: custom_field[{id}]
Beschreibung: Vorbefüllen von Buchungsfragen auf der letzten Seite des Widgets
Beispiel:

• iFrame: custom_field[100]=Ich%20habe%20euch%20via%20Google%20gefunden&custom_field[101]=Zweiter%20Wert
• Webkomponente: selected-custom-fields='{"100":"Ich habe euch via Google gefunden", "101": "Zweiter Wert"}'

Kunden Vorname vorbefüllen

Name des Parameters: customer[prename]
Beschreibung: Vorname vorbefüllen
Beispiel:

• iFrame: customer[prename]=John
• Webkomponente: selected-customer='{"prename":"John"}"

Kunden Nachname vorbefüllen

Name des Parameters: customer[lastname]
Beschreibung: Nachname vorbefüllen
Beispiel:

• iFrame: customer[lastname]=Smith
• Webkomponente: selected-customer='{"lastname":"Smith"}"

Kunden E-Mail Adresse vorbefüllen

Name des Parameters: customer[email]
Beschreibung: E-Mail Adresse vorbefüllen
Beispiel:

• iFrame: customer[email][email protected]
• Webkomponente: selected-customer='{"email":"[email protected]"}"

Kunden Telefonnummer vorbefüllen

Name des Parameters: customer[mobile]
Beschreibung: Mobile Telefonnummer vorbefüllen
Beispiel:

• iFrame: customer[mobile]=+41797896541
• Webkomponente: selected-customer='{"mobile":"+41797896541"}"

Widget Parameter nicht sichtbar machen

Name des Parameters: q
Beschreibung: Base64 enkodierter String mit allen unterstützen Parametern
Beispiel: q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw==

Daterange aufschalten

Name des Parameters: date-context, date-context-start, date-context-end
Beschreibung: Datumsrange aufschalten. Das folgende Beispiel aktiviert den Daterange von 26.10.2020 - 14.11.2020.
Beispiel:

• iFrame: date_context=2020-10-31&date_context_start=5&date_context_end=14
• Webkomponente:
  • date-context="2020-10-31"
  • date-context-start="5"
  • date-context-end="14"

Mitarbeiter hinterlegen, welche Termin gebucht hat

Name des Parameters: booker_worker_id
Beschreibung: 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.
Beispiel:

• iFrame: booker_worker_id=1000
• Webkomponente: booker-worker-id="1000"

UTM-Source setzen (woher kam die Buchung?)

Verfügbar seit: v4.9.0

Name des Parameters: utm_source

Beschreibung: Der UTM-Source Parameter ermöglicht ein kampagnenspezifisches Tracking. Wenn das Buchungswidget bspw. auf Instagram eingebunden wird, dann kann mittels utm-source="instagram" getrackt werden, dass der Termin via Instagram erstellt wurde. Der UTM-Source Parameter ist im Terminexport (Excel) für weitere Auswertungen verfügbar.

• iFrame: utm_source=instagram
• Webkomponente: utm-source="instagram"

Beispiel 1: Webkomponente

Anleitung Integration in die Webseite

 <calenso-booking
    partner='braincept'
    type='any'
    internal="false"
    booker-worker-id="1000"
    selected-store-id='2835'
    selected-store-name='Office Sempach Station'
    selected-appointment-service-ids='4493'
    selected-worker-id='38847'
    selected-custom-fields='{"3571":"123456789"}'
    selected-customer='{"prename":"max","lastname":"muster","email":"[email protected]","mobile":" 41764171234"}
    date-context="2020-10-31"
    date-context-start="5"
    date-context-end="14"
    utm-source="https://www.calenso.com/booking"
    q='null'>
 </calenso-booking>

Beispiel 2: iFrame

Anleitung Integration in die Webseite

 https://widget.calenso.com/
   ?partner=braincept
   &type=appointment
   &internal=true
   &isFrame=true
   &lang=de_CH
   &worker_id=23
   &service[]=374
   &store_id=2835
   &date_context=2020-10-31
   &date_context_start=5
   &date_context_end=14
   &worker_uuid=1234-1234-1242-1241-1424
   &booker_worker_id=23
   &store_name=Office%20Sempach%20Station
   &utm_source=instagram
   &customer[prename]=John
   &customer[lastname]=Smith
   &customer[email][email protected]
   &customer[mobile]=+417912345567
   &custom_field[100]=Ich%20habe%20euch%20via%20Google%20gefunden
   &custom_field[101]=Zweiter%20Wert
&q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw==