timum

Generic Website Integration

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

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

Booking channels are created and edited in timum in the provider calendar on the Appointment Booking page (see Booking Channels).

Generic integration widget for dynamic assignment of the bookable resource

For appointment booking on websites with generic content, such as property listings, timum provides a generic widget code. This is embedded in the website template for generic content and is automatically configured for the respective bookable resource by passing specific parameters.

The integration consists of the following components:

  1. Generic script snippet for the respective provider calendar
  2. Parameter passing via URL parameter or a global object on the page
  3. Configuration of layout and functionality in timum

Generic script snippet

You will find the generic code snippet in the settings of the respective provider calendar:

  1. Open timum and log in.
  2. Open the provider calendar for which you want to set up the website integration.
  3. Open Settings in the main menu.
  4. In the Provider Profile section, you will find the Provider Website Integration box. Click Show embed code and select JS Widget (or Iframe).
  5. Click Copy.
  6. Insert the snippet at the desired location on your website.

Advanced special application

The complete developer documentation describes the general script snippet with all configuration options:

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

Specification via resource reference and person ID

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

Additionally, the person ID from a CRM system can optionally be passed to the booking widget. Customers whose data is already stored in the CRM then no longer need to enter personal data and can book directly. Additional information can be requested by configuring the booking form. Collected data is automatically assigned to the record in the CRM. In addition to the contact identifier (personId), a platform identifier for the respective CRM must be passed.

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

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 matched to the record in the CRM, append URL parameters:

Parameter passing

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

Option 1: URL parameter

Pass 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 embedded.

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

Example:

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

Option 2: Global object on the page

Passing of the parameters (reference of the address manager and address ID) via a global object on 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 takes place in the provider calendar under Settings → Booking Layout.

Levels and prioritization of layout settings

A wide range of configuration options is available directly via the user interface in timum. Configuration settings can be defined hierarchically across various areas.

There is a priority cascade for applying the configurations (top overrides bottom):

  1. URL parameters
  2. Instance-specific entries in the global object (key bookingjs-<Channel-UUID>)
  3. Global object timumBookingConfig
  4. Appointment type configuration
  5. Booking channel configuration (Booking Channel)
  6. Provider calendar default
  7. Account default

Full documentation on npm

Beyond the configuration options within the timum interface – or independently of them – the configuration can also be made by web developers directly within the integration itself.

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