timum

Generic Website Integration

Integration of specific booking calendars via booking channels (Provider Channel)

In timum, any number of individually configured website widgets and booking links can be created. Such a configuration package, which always includes an individual booking link and simultaneously a code snippet for website integration, is called a booking channel or Provider Channel . The configuration can be adjusted at any time in timum. Changes take effect immediately on the booking pages via the existing link or in the website widget - without any update to the website or the link.

Booking channels are created and edited in timum within a team calendar (providers) on the Appointment Booking page.

Generic integration widget for dynamic assignment of the bookable resource

For appointment booking on websites with generic content, such as property listings, a generic widget code is available in timum. This is integrated into the website template for generic content and automatically configured for specific booking resources by passing specific parameters.

The integration consists of the following components:

  1. Generic script snippet for the specific team calendar (provider)
  2. Parameter passing via URL parameter or global object parameter
  3. Configuration of layout and functionality in timum

Generic Script Snippet

The generic code snippet is available in the settings of the respective provider (team calendar):

  1. Open timum and log in.
  2. Open the calendar profile (team calendar) for which a website integration is to be set up.
  3. Open Settings in the main menu.
  4. In the Provider Profile (Calendar Profile) section, you will find the 'Provider Website Integration' box.
  5. Copy the JS Widget Code Snippet.
  6. Insert the code snippet into the website at the desired location.

Extended Special Application

The general script snippet with all configuration options is documented in the complete documentation for developers:

https://www.npmjs.com/package/@timum/booking#in-a-script-tag

Specification via resource reference and person ID

It is mandatory to pass the reference parameter of at least one bookable timum resource. Multiple resources are also possible. References can be generated from object IDs of the CRM system or stored as UUIDs in timum.

Additionally, person IDs from a CRM system can optionally be passed to the booking widget to create a comfortable personalized experience for customers whose data is already in the CRM. No entry of personal data is required for appointment booking; instead, bookings can be made directly. The query for additional data and information is possible through configuration of the booking form. Collected data is automatically assigned to the record in the CRM. In addition to the contact identifier (addressid), a platform ID for the specific CRM must be passed.

  • bookable resource (ref) - required
  • pre-identified customer (pData) - optional
    • platform (CRM system)
    • addressid

Personalized booking links for integrated website plugins

If the booking link is to be personalized for each individual recipient, so that the person is automatically recognized and reliably mapped to the record in the CRM, URL parameters must be appended:

Parameter passing

There are two general options for parameter passing, which are described below.

Option 1: URL parameter

Parameter passing of the timum resource reference for the address manager (real estate agent) and the customer ID (AddressID) as URL parameters to your own website in which the timum widget is integrated.

pDataId = <address ID der Person>
pDataPlatform = <Kennung des CRM>

Example:

www.meine-webseite.de/terminbuchung?pDataId=0815&pDataPlatform=onoffice

Option 2: In-page global object

Passing the parameters, reference of the address manager and address ID via a global object in the website.

https://www.npmjs.com/package/@timum/booking#global-config-override

window.timumBookingConfig = {
   // Top-level slots — applied to every BookingJS instance on the page
   appConfig: {
	   ref: 'current-resource-ref',
	   pData: {
		   platform : ´onOffice´,
		   personId : ´0815´
		   },
	   culture: 'de' /* … */
	 },
   muiTheme:  { palette: { primary: { main: '#abc' } } },
   fcConfig:  { /* … */ },

   // Per-instance overrides — only applied to the instance whose
   // appConfig.rootElId matches the key. Reserved names 'appConfig',
   // 'muiTheme', 'fcConfig' are never matched even if a rootElId equals one.
   'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
     appConfig: { ref: 'special-ref' },
   },
   'bookingjs-{other-channel-uuid}': {
     muiTheme: { palette: { primary: { main: '#def' } } },
   },
 };

Configuration of layout and functionality

When integrating as a generic widget, where the actually bookable resource depends on the content of a dynamic website, the configuration is done in the Settings area of the team calendar (provider) on the 'Booking Layout' sub-page.

Levels and prioritization of layout settings

A large range of configuration options is available directly via the user interfaces in timum. Configuration defaults can be defined hierarchically in various areas.

There is a priority cascade for the application of configurations:

  1. URL parameters
  2. Special bookingjs-other config via inPage global object (bookingjs-other-uuid)
  3. Global Object timumBookingConfig
  4. Product config
  5. Provider Channel Config
  6. Provider Default Config
  7. Account Default Config

General extended documentation on npm

Beyond or independently of the configuration options within the timum interfaces, the configuration can also be done by web developers directly within the integration itself.

Documentation of the timum configuration: www.npmjs.com/package/@timum/booking