timum

Generische Website Integration

Integration spezifischer Buchungskalender über Buchungskanäle (Provider Channel)

In timum können beliebig viele individuell konfigurierte Website-Widgets und Buchungs-Links erstellt werden. Ein solches Konfigurationspaket, welches immer einen individuellen Buchungslink und gleichzeitig ein Code Snippet für eine Webseiten-Integration umfasst, wird Buchungskanal oder auch Provider Channel genannt. Die Konfiguration kann in timum jederzeit angepasst werden. Änderungen werden sofort auf den Buchungsseiten über den bestehenden Link bzw. in Website-Widget wirksam - ganz ohne Update der Webseite oder des Links.

Buchungskanäle werden in timum innerhalb eines Team-Kalenders (providers) auf der Seite Terminbuchung erstellt und bearbeitet.

Generisches Integrations-Widget für dynamische Zuweisung der buchbaren Ressource

Für die Terminbuchung auf Webseiten mit generischen Inhalten, wie z.B. Immobilien-Exposés, steht in timum ein generischer widget code zur Verfügung. Dieser wird in die Webseiten-Vorlage für generische Inhalte eingebunden und für durch Übergabe spezifischer Parameter automatisch für spezifische Buchungs-Ressourcen konfiguriert.

Die Integration setzt sich aus folgenden Komponenten zusammen:

  1. Generisches Script Snippet für den spezifischen Team-Kalender (provider)
  2. Parameter-Übergabe durch Url-Parameter oder global object parameter
  3. Konfiguration von Layout und Funktionalität in timum

Generisches Script Snippet

Das generische Code Snippet ist in den Einstellungen des jeweiligen Providers (Team-Kalender) verfügbar:

  1. Öffne timum and melde dich an.
  2. Öffne das Kalender-Profil (Team-Kalender), für welchen eine Website-Integration eingerichtet werden soll.
  3. Öffne im Hauptmenü die Einstellungen.
  4. Im Abschnitt Anbieter-Profil (Kalender-Profil) findest du die Box ‘Anbieter Webseiten Integration’.
  5. Kopiere das JS Widget Code Snippet.
  6. Füge das Code Snippet in die Webseite an der gewünschten Stelle ein.

Erweiterte Spezial-Anwendung

In der vollständigen Dokumentation für Entwickler ist das allgemeine Script Snippet mit allen Konfigoptionen dokumentiert:

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

Spezifikation durch Ressourcen-Referenz und Personen-ID

Obligatorisch ist die Übergabe des Referenz-Parameters von mindestens einer buchbaren timum Ressource. Dabei sind auch mehrere Ressourcen möglich. Referenzen können aus Objekt-IDs des CRM-Systems generiert werden oder als UUID aus timum hinterlegt werden.

Zusätzlich können optional Personen-ID aus einem CRM-System an das Buchungs-Widget übergeben werden, um ein komfortables personalisiertes Erlebnis für Kunden zu erzeugen, deren Daten bereits im CRM vorliegen. Dabei ist keine Eingabe von persönlichen Daten für die Terminbuchung erforderlich, sondern es kann direkt gebucht werden. Die Abfrage zusätzlicher Daten und Informationen ist durch Konfiguration des Buchungsformulars möglich. Erhobene Daten werden automatisch dem Datensatz im CRM zugeordnet. Neben der Kontakt-Kennung (addressid) ist eine platform-ID für das spezifische CRM zu übergeben.

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

Personalisierte Buchungslinks für integrierte Website-Plugins

Wenn der Buchungslink personalisiert für jeden einzelnen Empfänger sein soll, so dass die Person automatisch erkannt wird und zuverlässig zum Datensatz im CRM mapped, so sind URL-Parameter anzuhängen:

Parameter-Übergabe

Für die Parameterübergabe gibt es zwei allgemeine Möglichkeiten, die im Folgenden beschrieben werden.

Option 1: Url parameter

Parameter-Übergabe der timum Resource Referenz für den Adress-Betreuer (Makler) und der ID des Kunden (AddressID) als url-Parameter an die eigene Website, in der das timum Widget eingebunden ist.

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

Beispiel:

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

Option 2: In-page global object

Übergabe der Parameter, Referenz des Adress-Betreuer und Address ID über ein Global Object in der 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' } } },
   },
 };

Konfiguration von Layout und Funktionalität

Bei der Integration als generisches Widget, bei der die tatsächlich buchbare Ressource vom Inhalt einer dynamischen Website abhängt, erfolgt die Konfiguration im Bereich Einstellungen des Team-Kalenders (provider) auf der Unterseite ‘Buchungslayout’.

Ebenen und Priorisierung von Layouteinstellungen

Ein großer Umfang an Konfigurationsmöglichkeiten steht direkt über die User Interfaces in timum zur Verfügung. Konfigurationensvorgaben können hierarchisch in verschiedenen Bereichen definert werden.

Es gibt eine Prioritätskaskade für die Anwendung der Konfigurationen:

  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

Über die Konfigurationsmöglichkeiten innerhalb der timum Interfaces hinaus oder auch unabhängig davon kann die Konfiguration auch durch Webentwickler direkt innerhalb der Integration selbst vorgenommen werden.

Dokumentation der timum Konfiguration: www.npmjs.com/package/@timum/booking