Übermittlung von Daten ans Buchungswidget (Kontextabhängiges Buchungswidget) / Transfer of data to the booking widget (context-dependent booking widget)

English version below.

Es ist möglich, Daten via URL ans Buchungswiget zu übergeben. Der folgende Supportartikel beschreibt 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]=[e-mail]
• Webkomponente: selected-customer='{"email":"[e-mail]"}"

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

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

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"

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":"[e-mail]","mobile":" 41764171234"}
    date-context="2020-10-31"
    date-context-start="5"
    date-context-end="14"
    q='null'>
 </calenso-booking>

Beispiel 2: iFrame

Anleitung Integration in die Webseite

 https://dev.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
   &customer[prename]=John
   &customer[lastname]=Smith
   &customer[email]=[e-mail]
   &customer[mobile]=[phone]
   &custom_field[100]=Ich%20habe%20euch%20via%20Google%20gefunden&custom_field[101]=Zweiter%20Wert
   &q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw== 

 

English version

It is possible to transfer data via URL to the booking tool. The following support article describes this functionality.

Supported Parameters

Preselect branch with ID
Name of the parameter: store_id
Description: Preselect store
Example: 

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

Preselect store with the name of the store
Name of the parameter: store_name
Description: Preselect store (if ID is not available)
Example: 

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

Pre-select services
Name of the parameter: service[]
Description: Pre-select services
Example: 

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

Preselect bookable resource
Name of the parameter: worker_id
Description: Preselect bookable resources (e.g. employees)
Example: 

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

Prefill booking questions
Name of the parameter: custom_field[{id}]
Description: Pre-fill booking questions on the last page of the widget
Example:

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

Customer-first name prefill
Name of the parameter: customer[prename]
Description: Prefill first name
Example: 

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

Customer last name prefill
Name of the parameter: customer [lastname]
Description: Prefill last name
Example: 

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

Prefill customer e-mail address
Name of the parameter: customer[email]
Description: Prefill e-mail address
Example: 

• iFrame: customer[email]=[e-mail]
• Webcomponent: selected-customer='{"email":"[e-mail]"}"

Prefill customer telephone number
Name of the parameter: customer[mobile]
Description: Prefill mobile phone number
Example: 

• iFrame: customer[mobile]=[phone]
• Webcomponent: selected-customer='{"mobile":"[phone]"}"

Make parameter invisible
Name of the parameter: q
Description: Base64 encoded string with all supported parameters
Example: q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw== 

Enable date range
Name of the parameter: date-context, date-context-start, date-context-end
Description: Enables date range. The following example activates the date range from 26.10.2020 - 14.11.2020.
Example:

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

Save employee that booked the appointment
Name of the parameter: booker_worker_id
Description: If you want to save which logged in employee has booked the appointment, you can set booker_worker_id. In case of the internal booking widget this value is set automatically as soon as an employee is logged in.
Example:

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

 

Example 1: Web-Component

 <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":"[e-mail]","mobile":" 41764171234"}
    date-context="2020-10-31"
    date-context-start="5"
    date-context-end="14"
    q='null'>
 </calenso-booking>

Example 2: iFrame

 https://dev.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
   &customer[prename]=John
   &customer[lastname]=Smith
   &customer[email]=[e-mail]
   &customer[mobile]=[phone]
   &custom_field[100]=Ich%20habe%20euch%20via%20Google%20gefunden&custom_field[101]=Zweiter%20Wert
   &q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw==