Transfer of data to the booking widget (context-dependent booking widget)

TABLE OF CONTENTS

• Supported Parameters
• Example 1: Web-Component
• Example 2: iFrame

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]=john.smith@gmail.com
• Webcomponent: selected-customer='{"email":"john.smith@gmail.com"}"

Prefill customer telephone number

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

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

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
• Webcomponent:
  • 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
• Webcomponent: booker-worker-id="1000"

UTM-Source setzen (woher kam die Buchung?)

Available since: v4.9.0

Name of the parameter: utm_source

Description: The UTM source parameter enables campaign-specific tracking. For example, if the booking widget is integrated on Instagram, then it can be tracked via utm-source="instagram" that the appointment was created via Instagram. The UTM source parameter is available in the appointment export (Excel) for further reporting.

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

Example 1: Webcomponent

 <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":"max@muster.ch","mobile":" 41764171234"}
    date-context="2020-10-31"
    date-context-start="5"
    date-context-end="14"
    utm-source="instagram"
    q='null'>
 </calenso-booking>

Example 2: iFrame

 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]=john.smith@gmail.com
   &customer[mobile]=+417912345567
   &custom_field[100]=Ich%20habe%20euch%20via%20Google%20gefunden
   &custom_field[101]=Zweiter%20Wert
&q=c3RvcmVfaWQ9MjgzNSZzZXJ2aWNlW109NDQ5MyZ3b3JrZXJfaWQ9Mzg4NDcmY3VzdG9tX2ZpZWxkWzM1NzFdPTEyMzQ1Njc4OSZjdXN0b21lcltwcmVuYW1lXT1tYXgmY3VzdG9tZXJbbGFzdG5hbWVdPW11c3RlciZjdXN0b21lcltlbWFpbF09bWF4QG11c3Rlci5jaCZjdXN0b21lclttb2JpbGVdPSs0MTc2NDE3MTI5Mw==