timum

Generische Website Integration

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

In timum können beliebig viele individuell konfigurierte Website-Widgets und Buchungslinks erstellt werden. Ein solches Konfigurationspaket, das immer einen individuellen Buchungslink und gleichzeitig ein Code-Snippet für die Webseiten-Integration umfasst, heißt Buchungskanal oder Booking Channel. Die Konfiguration kann in timum jederzeit angepasst werden. Änderungen werden sofort auf den Buchungsseiten über den bestehenden Link bzw. im Website-Widget wirksam – ganz ohne Update der Webseite oder des Links.

Buchungskanäle werden in timum im Anbieter-Kalender auf der Seite Terminbuchung erstellt und bearbeitet (siehe Booking Channels).

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 durch Übergabe spezifischer Parameter automatisch für die jeweilige Buchungs-Ressource konfiguriert.

Die Integration setzt sich aus folgenden Komponenten zusammen:

  1. Generisches Script-Snippet für den jeweiligen Anbieter-Kalender
  2. Parameter-Übergabe per URL-Parameter oder über ein globales Objekt auf der Seite
  3. Konfiguration von Layout und Funktionalität in timum

Generisches Script-Snippet

Das generische Code-Snippet finden Sie in den Einstellungen des jeweiligen Anbieter-Kalenders:

  1. Öffnen Sie timum und melden Sie sich an.
  2. Öffnen Sie den Anbieter-Kalender, für den die Website-Integration eingerichtet werden soll.
  3. Öffnen Sie im Hauptmenü die Einstellungen.
  4. Im Abschnitt Anbieter-Profil finden Sie die Box Anbieter Webseiten Integration. Klicken Sie auf Einbettungscode anzeigen und wählen Sie JS Widget (oder Iframe).
  5. Klicken Sie auf Kopieren.
  6. Fügen Sie das Snippet an der gewünschten Stelle in Ihre Webseite ein.

Erweiterte Spezial-Anwendung

In der vollständigen Dokumentation für Entwickler ist das allgemeine Script-Snippet mit allen Konfigurationsoptionen 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 kann optional die Personen-ID aus einem CRM-System an das Buchungs-Widget übergeben werden. Kunden, deren Daten bereits im CRM vorliegen, müssen dann keine persönlichen Daten mehr eingeben, sondern buchen direkt. Die Abfrage zusätzlicher Angaben ist durch Konfiguration des Buchungsformulars möglich. Erhobene Daten werden automatisch dem Datensatz im CRM zugeordnet. Neben der Kontakt-Kennung (personId) ist eine Plattform-Kennung für das jeweilige CRM zu übergeben.

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

Personalisierte Buchungslinks für integrierte Website-Plugins

Wenn der Buchungslink personalisiert für jeden einzelnen Empfänger sein soll, sodass die Person automatisch erkannt und zuverlässig dem Datensatz im CRM zugeordnet wird, hängen Sie URL-Parameter an:

Parameter-Übergabe

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

Option 1: URL-Parameter

Übergabe der timum-Ressourcen-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: Globales Objekt auf der Seite

Übergabe der Parameter (Referenz des Adress-Betreuers und Address-ID) über ein globales Objekt 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 Anbieter-Kalender unter Einstellungen → Buchungslayout.

Ebenen und Priorisierung von Layouteinstellungen

Ein großer Umfang an Konfigurationsmöglichkeiten steht direkt über die Benutzeroberfläche in timum zur Verfügung. Konfigurationsvorgaben können hierarchisch in verschiedenen Bereichen definiert werden.

Es gibt eine Prioritätskaskade für die Anwendung der Konfigurationen (oben schlägt unten):

  1. URL-Parameter
  2. Instanz-spezifische Einträge im globalen Objekt (Schlüssel bookingjs-<Channel-UUID>)
  3. Globales Objekt timumBookingConfig
  4. Terminart-Konfiguration
  5. Buchungskanal-Konfiguration (Booking Channel)
  6. Standard des Anbieter-Kalenders
  7. Standard des Accounts

Vollständige Dokumentation auf npm

Über die Konfigurationsmöglichkeiten innerhalb der timum-Oberfläche hinaus – oder 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