timum Hilfe durchsuchen

Website-Booking-Widget – onOffice

Plug & Play bzw. Copy & Paste

Die statische Plug & Play Einbindung für die Buchung einer Ressource ohne Anpassungen ist durch eine Code-Snippet mit wenigen Zeilen zu erreichen. Hier die Kopier-Vorlage in einer Sandbox Test-Umgebung. (gerne beliebig darin ändern und testen)

timum booking widget plug & play: https://jsfiddle.net/timum/3swq1tdy/

Advanced Embed (Fortgeschritten)

Die im Folgenden beschriebenen Möglichkeiten der Einbettung der timum Buchung in Website erfordert einige Erfahrung mit HTML und javascript.

Einige Funktionalitäten sind nur in timum Professional Plänen verfügbar.

Zugangssteuerung für die eingebettete Terminbuchung

Die Zugangssteuerung zur Terminbuchung innerhalb der eingebetteten Terminbuchung erfolgt über url-Parameter. Nur, wenn diese Parameter anhängen, ist die Terminbuchung sichtbar und zugänglich.
Eine Immobilien-Seite – öffentliche Web-url – anonyme Visitor:
Die selbe Immobilien-Seite – exklusive url – für eingeladene Kontakte.
Klicke einen Termin an. – Du bist bereits identifiziert (In diesem Fall ein demo-contact):
Du kannst je nach Immobilien-Objekt steuern, ob die Terminbuchung auch für anonyme Visitor erscheinen soll oder ausschließlich für eingeladene.

Kapselung als lokaler iFrame

Um Überlagerungen bzw. Störungen des Layouts des timum plugins durch Layout-Klassen der Website zu verhindern, ist eine Einbindung als iFrame sinnvoll.
Zwei Möglichkeiten:
a) per timum Vorlage als iFrame mit srcdoc Attribut.
b) als selbst erstelltes und gehostetes file timum.html, welches den embed code mit allen customisations enthält und in der eigentlichen Einbettung im iFrame über das src Attribut referenziert wird
Hier wieder ein Beispiel in jsfiddle: https://jsfiddle.net/timum/wov6pLk7/

Plugin-Konfiguration (advanced)

Die vollständige technische Dokumentation für die Einbettung und Konfiguration:
timum booking Widget: https://www.npmjs.com/package/@timum/booking

Übergabe von Custom Fields

Eine wesentliche Anpassungsmöglichkeit ist die Definition und Einbindung von Formularfeldern für den Buchungsdialog. In der Gesamtdokumentation findet sich ebenfalls ein Kapitel dazu. Hier vor ein Einblick für die Übergabe der Custom Fields:

Anatomy of a field

  <fieldName> : {
      title: string or JSXElement;
      validation: yup based validation. See https://github.com/jquense/yup. Re-exported and accessible via timum.yup
      type: string; either 'text' (default), 'phoneNumber', 'textarea', 'checkbox' or 'select',
      prefilled: string; value a fiels is initiated with.
                 Note that for fields of type 'select' you must use the 'key' of on of it's options.
      preventRendering: boolean, default false;
                        if true the field is not visible to the user.
                        Useful in conjunction with sendCustomValuesInMessage allowing you to
                        enrich booked appointments with internal data
                        without the customer becoming aware of your internal processes.
  }

Das Code-Snippet für den html-Bereich

<div id="bookingSection" style="display:none">
  <h4>Besichtigung</h4>
  <div id="timumBooking"></div>
</div>

<div class="container">
  <img src="https://cdn.timum.de/wp-content/uploads/sites/6/2023/03/villa-mit-parkgrundstueck.jpg" alt="Villa mit Parkgründstück" class="aligncenter size-full wp-image-1328" />
</div>
<h2>Interaktives Web-Exposé mit Terminbuchung</h2>
<p>In diesem interaktiven Web-Exposé erscheint die Terminbuchung nur für Besucher, die über einen speziellen Link eingeladen wurden.<br />
Bei Nutzung von timum mit Integration in ein CRM-System, werden exklusiv durch personalisierten Link eingeladene Kontakte automatisch identifiziert und direkt ihren Termin, ohne Dateneingabe.<br />
Der Termin wird automatisch dem jeweiligen Kontakt im CRM-System als Aktivität zugewiesen.</p>

 

Einbettung der Terminbuchung der Maklerin

Es ist außerdem möglich, statt des Kalenders der Immobilie auch den Kalender des Objekt-Betreuers einzubinden. Dieser bietet dann Sprechzeiten an, in denen sich Interessenten einen Termin anfragen oder buchen können. Die Sprechzeiten berücksichtigen dabei automatisch alle bestehenden Termine aus dem onOffice-Kalender des Betreuers.

Auch diese Einbettung wird gesteuert über die Resource-Reference der Makler-Ressource als url-Parameter.

Das Script am Ende des body – Buchung auf Makler mit Übergabe der Immobilien-Kennung

Für die Übertragung der Immobilien-Informationen in die Buchung eines Termins in einen Makler-Kalender, müssen in der timum Buchungs-UI custom fields verwendet werden. Das ist etwas mehr code und nicht mehr optimal für so einen generischen iFrame, wie er im nächsten Kapitel beschrieben ist. Daher müsstet ihr in diesem Fall das timum Widget doch besser in ein separates html File legen, welches ihr dann als iFrame aufruft.
Für die Anpassung des timum Widgets und die Übergabe der Immobilien-Daten als Custom Field braucht ihr folgende jsfiddle Demo:
Dort findet ihr das field “selectedEstate”. In dieses muss in den Parameter ‘prefilled’ die Immobilien-Daten eingetragen werden (Hier im Beispiel ‘Objekt SCR-700’.

Wichtig für die Übertragung der Custom Data ist außerdem der letzte Wert ’sendCustomValuesInMessage: true’.

      selectedEstate: {
        index: 6,
        title: 'Gewähltes Objekt',
        type: 'text',
        prefilled: 'Objekt SCR-700',
        preventRendering: true,
      },
    },

sendCustomValuesInMessage: true, // necessary to transmit custom field values as part of the customer message

 

Das Script am Ende des body – Buchung auf eine Immobilie

Hier werden die Parameter ‘ref’ und ‘pData’ an den iFrame übergeben.

Das ist die standard-Variante für die Buchung auf Immobilien ohne Customization des timum-Frontends
und auch ohne die Übergabe von Hidden-Field-Parametern für die Spezifikation einer Immobilie bei Buchung auf einen Makler.
<script>
  // IMPORTANT: put these script to bottom before closing body tag, cause div 'timumBooking' is needed to be created first

  const url = new URL(window.location.href);
  const ref = url.searchParams.get("ref");
  const pdata = url.searchParams.get("pData");
  // Show hidden button and headline for appointment booking
  if ( ref || pdata) { document.getElementById("bookingSection").style.display = "block”; }

  var iframe = document.createElement('iframe');
  iframe.srcdoc = "<!doctype html><body><div id='bookingjs'><\/div><script type='module'>import * as timum from 'https:\/\/cdn.jsdelivr.net\/npm\/@timum\/booking@1.2.7\/build\/timum-booking.js'; timum.init({ calendarFrontend: 'pureListView' });<\/script><\/body>";
  iframe.id = "timumFrame"; iframe.setAttribute('width','100%'); iframe.setAttribute('height','700'); iframe.setAttribute('frameborder','0');
  document.getElementById('timumBooking').appendChild(iframe);
  
  timumFrame.onload = function () {
    var frameLocation = new URL(timumFrame.contentWindow.location.href);
    if ( ref || pdata ) {
      frameLocation = frameLocation + '?'; 
      if ( ref ) { frameLocation = frameLocation + 'ref=' + ref + '&'; };
      if ( pdata ) { frameLocation = frameLocation + 'pData=' + pdata; };
      timumFrame.contentWindow.location.href = frameLocation;
    }
    timumFrame.onload = null; // clear the handler, not to run it after the location update by parameters
  }
</script>

Termin-Buchungslink in onOffice Mailing Templates

Die Prinzip-Referenz für den Aufbau eines Referenz-Links zeigt diese url:

www.timum.de/read/interaktives-web-expose?ref=_Id@2b4f51b0-11db-11ea-b4f2-0ab1a19a17c2@onofficeEstate&pData={%27platform%27:%27onoffice%27,%27address%27:%27_AdrDatensatznummer%27,%27tenantId%27:%27_MdtID%27}
In diesem Beispiel sind die relevanten onOffice Makro Parameter im pData-Parameter integriert.

Bitte folgende Bestandteile ersetzen:

  1. die base url ersetzen durch die url der jeweiligen Immobilie – im Beispiel    www.timum.de/read/interaktives-web-expose
    • Hier braucht es ein geeignetes Mapping, um aus einem in onOffice verfügbaren Parameter die url der Immobilien-Detailseite auf eurer Website zu generieren.
    • Hast du dazu eine Idee? Lass uns dazu am besten nochmal telefonieren.
  2. den Value für den ref Parameter
Im Beispiel wird die onOffice-Datensatz-ID der Immobilie automatisch eingesetzt  ( _Id )
Für Personen, also Maklerinnen, muss entsprechend die Referenz aus timum eingesetzt werden.

Es gibt dafür 3 mögliches Varianten:

a. die booking channel ID (Damit wird man zukünftig auch die Terminart über den Link definieren können.)
b. die generische onOffice-Reference: userID@timumProviderUuid@onofficeCalendar
c. eine selbst definierte timum-Reference, z.B. hannawerres@timumProviderUuid@timum
Inhalt

timum timum Hilfe