Einrichtung der Online-Buchung auf der eigenen Website

Die Online-Buchung für Ihr System wird über folgende URL erreicht: scheduler.clinicore.eu/systemname

Wenn die Online-Buchung eingerichtet ist (entsprechende Leistungen als online buchbar Ihrerseits definiert sind), können Sie auf Ihrer Webseite die Leistungen entweder als Liste oder als Kacheln (”cards”) anzeigen lassen:

Als Kacheln

Als Liste

Konfigurationsmöglichkeiten (für Ihre Webdesigner)

Die Online-Buchung für Ihr System wird über folgende URL erreicht:

scheduler.clinicore.eu/systemname

vgl.systemname.clinicore.eu

Diese URL können Sie bspw. über ein iframe einbetten:

<iframe src="https://scheduler.clinicore.eu/systemname" 
    frameborder="0" width="100%" height="970px"></iframe>

Grundsätzlich lässt sich die Online-Buchung auf diverse Aspekte anpassen, u.a. für Benutzer, Leistungen, Orte und Patientenkategorien. Hierfür wird die ID benötigt:

Um beispielsweise die ID einer Leistung zu finden, gehen Sie wie folgt vor:

⚙️ → Leistungen → Bearbeiten mit Stift → ID aus Adressleiste ablesen:

https://systemname.clinicore.eu/services/5/edit

Der rot markierte Text stellt die URL der Leistung dar (5)

Analog gehen Sie bei Personen (Benutzern), Orten und Patientenkategorien vor.

Es gibt die Möglichkeit, dass Sie das iframe per CSS stylen. Letzteres kann dann von uns eingebunden werden.

Mögliche Parameter

Die Online-Buchung lässt sich auf Leistungen, Benutzer sowie Orte eingrenzen, sodass lediglich diese ausgewählt werden können:

?services[]=<service1_id>&services[]=<service2_id>

?user=<user_id>

?location=<location_id>

?locations[]=<location_id>&locations[]=<location_id>

Leistungen und Orte können mit Angabe mehrerer IDs eingeschränkt werden. Nur Benutzer können nur auf eine einzige ID beschränkt werden.

Vorauswahl einer Leistung

?selectedService=<service_id>

Vorauswahl eines Benutzers nur in Kombination mit einer Vorauswahl einer Leistung möglich

?selectedUser=<user_id>

Vorauswahl von Benutzer-Gruppen

?users[]=<user_id_1>&users[]=<user_id_2>&....

Termine aller Benutzer anzeigen

?disableUserSelection=true

Auswahl “alle Termine anzeigen” deaktivieren

?disableAllSelection=true

Automatische Zuweisung einer Patientenkategorie nach der Buchung

?category=<category_id>

Kachel-Ansicht (s. Screenshot oben)

Aktivieren

?showCards=true

Preise ausblenden

&showPrice=false

Termindauer ausblenden

&showDuration=false

showPrice und showDuration lassen sich auch kombinieren. Einzelne Parameter sind mit einem “&” zu verknüpfen, zB: ?showCards=true&showPrice=false

Anpassung des Stylings (CSS)

Das Design der Online-Buchung kann über ein CSS selbstständig angepasst werden. Wenn Sie uns die URL zu Ihrem gehosteten CSS schicken, binden wir diese URL gerne ein!

Automatische Größenanpassung des Iframes in ihrer Webseite

Damit sich die Onlinebuchung nahtlos in ihre Webseite integriert, ist es notwendig, dass diese auf bestimmte Ereignisse hört, welche die Onlinebuchung übermittelt. Die übermittelte Nachricht enthält folgende Struktur:

{
  type: 'resize', // statisch
  height: xxx,    // Höhe des iframes
  width: xxx,     // Breite des iframes
}

Diese kann durch einen einfachen message-Listener verarbeitet werden:

// selects the first iframe on the page - better use an ID if possible
const $iframe = document.querySelector('iframe');

window.addEventListener('message', (event) => {
  // only react to messages from the scheduler
  if (event.origin !== 'https://scheduler.mobimed.at') {
    return;
  }
  
  if (event.data.type === 'resize') {
    $iframe.style.height = `${event.data.height}px`;
  }
});

Nachfolgendes Codebeispiel richtet die Buchung mit automatischer Größenanpassung vollständig ein:

<iframe id="booking" src="https://scheduler.mobimed.at/systemname" 
    frameborder="0" width="100%"></iframe>
<script type="text/javascript">
const $bookingIframe = document.querySelector('#booking');

window.addEventListener('message', (event) => {
  // only react to messages from the scheduler
  if (event.origin !== 'https://scheduler.mobimed.at') {
    return;
  }
  
  if (event.data.type === 'resize') {
    $bookingIframe.style.height = `${event.data.height}px`;
  }
});
</script>