Die lemniscus-Online-Terminbuchung, kurz PSS/OT (Patienty-Self-Service online Terminbuchung), kann entweder einfach nur verlinkt oder direkt in die eigene Homepage eingebettet werden. Wir bieten beide Verfahren an, empfehlen jedoch die Verlinkung. Das Einbetten in die eigene Homepage sieht selten wirklich gut aus, da das Design der Webseite und das Design der Online-Terminbuchung meistens so unterschiedlich sind, was es die Online-Terminbuchung wie ein Fremdkörper aussehen lässt. Bei der Verlinkung haben wir auch weniger Probleme mit der mobilen Ansicht erfahren.
Einbindung durch Verlinkung
Die Einbindung durch Verlinkung ist sehr einfach - man muss nur einen Link auf die Homepage setzen. Je nach Wunsch und Designmöglichkeiten kann ein einfacher Link oder eine Schaltfläche zum Einsatz kommen. Der persönliche Link ist, sobald die Online-Terminbuchung eingeschaltet ist, in der Kachel Portal zu finden:
Einbindung durch Einbettung - neu -
Die Einbindung durch Einbettung ist etwas komplizierter, da man sich bei diesem Ansatz mit den Webtechnologien der eigenen Webseite auskennen muss. Hier wollen wir lediglich die Informationen zusammentragen, die ein Webdesigny benötigt, um die Online-Terminbuchung in eine Seite einzubetten.
Der folgende JavaScript muss auf der Seite (im Header-Bereich der HTML-Seite) eingebunden werden:
<script type="text/javascript">
let pssConfig = {
host: "https://my.lemniscus.de",
token: "[===== DEIN TOKEN AUS DEN EINSTELLUNGEN =====]",
showMainVideoTeaser: false,
showTermineTeaser: true,
showFooter: false,
useCustomBootstrapStyle: false
}
document.write("<script type='text/javascript' src='" + pssConfig.host
+ "/lem/app.nocache-pss.js?v=" + Date.now() + "'><\/script>");
</script>
Deinen Token findest Du in lemniscus in den Einstellungen (unser Logo/Fischli -> Zahnrad -> Kachel Tokens). Wenn Du die Zeile "PSS/OT lemniscus online Terminbuchung anklickst", wird er Dir angezeigt und Du kannst ihn kopieren.
Zusätzlich muss im Body-Bereich folgendes “div”-Element an der Stelle auf der Seite eingetragen werden, in der die Online-Terminbuchung eingeblendet werden soll:
<div id="pss"></div>
Anforderungen für die Einbettung - neu -
Es muss darauf geachtet werden, dass dem Inhalt der Online-Terminbuchung immer mindestens 400 Pixel Breite zur Verfügung stehen, da sonst die korrekte Darstellung nicht gewährleistet ist. Diese Mindestanforderung stellt für die meisten Mobilgeräte keine Einschränkung dar. Bei Geräten mit sehr schmalen Bildschirmen (z.B. iPhone SE 1. und 2. Generation) muss die Mindesbreite allerdings durch die Webseite sichergestellt werden. Dies kann entweder über das Setzen einer Mindesbreite für die Webseite oder die Angabe eines "Viewport" erreicht werden.
Als Beispiel haben wir das so auf unserer PSS/OT Seite wie folgt gelöst:
<html>
<head>
<meta id="viewport" name="viewport"
content="width=device-width,initial-scale=1">
<script type="text/javascript">
window.onload = function() {
if (screen.width < 400) {
var viewport = document.getElementById('viewport');
viewport.setAttribute('content',
'width=device-width,initial-scale='
+ (screen.width / 400));
}
}
</script>
</head>
<body>
<!-- [...] -->
</body>
</html>
Dieser Ansatz funktioniert bei uns ganz gut und kann gerne auf die eigene Seite übernommen werden. Es kann sein, dass es zu Layout-Problemen kommt, wenn die Seite bereits "responsive" umgesetzt ist oder anderweitige Manipulationen des Viewports vorgenommen werden.
Achtung:
Bei der Einbettung muss sichergestellt werden, dass die Schriftgröße (CSS-Attribut font-size) in der Webseite für das Element html und das Element mit id="pss" identisch ist. Andernfalls kann es an verschiedenen Stellen zu Anzeige- und Funktions-Fehlern kommen, z.B. können Labels von Eingabefeldern den eingegebenen Text verdecken oder die Schriftgröße einiger Bedienelemente wie Knöpfe, etc. kann zu groß oder zu klein ausfallen.
Konfigurationsoptionen - neu -
Bei der Einbettung stehen der Online-Terminbuchung ein paar Konfigurationsoptionen zur Verfügung:
let pssConfig = {
host: "https://my.lemniscus.de",
token: "[===== DEIN TOKEN AUS DEN EINSTELLUNGEN =====]",
showMainVideoTeaser: false,
showTermineTeaser: true,
showFooter: false,
useCustomBootstrapStyle: false
}
| Option | Beschreibung |
| host | Zeigt auf den Server, mit dem die Online-Terminbuchung kommunizieren soll. (Pflichtfeld, muss immer gleich bleiben) |
| token | Hier muss der eigene Token aus den Einstellungen in lemniscus eingetragen werden. (Pflichtfeld) |
| showMainVideoTeaser |
Wurden in der Konfiguration der Online-Terminbuchung in lemniscus Videos hinterlegt, können diese bei Bedarf mit angezeigt werden. (Optional, "false" wenn nicht angegeben) |
| showTermineTeaser |
Wurden Termin-Teaser für eine oder mehrere Leistungsketten in lemniscus eingestellt, können diese bei Bedarf mit angezeigt werden. (Optional, "false" wenn nicht angegeben) |
|
showFooter |
Schaltet die Anzeige der Praxisdaten im unteren Bereich ein. Wenn die Online-Terminbuchung auf der eigenen Homepage eingebunden wird, ist das meistens nicht nötig. (Optional, "false" wenn nicht angegeben) |
|
useCustomBootstrapStyle |
Bietet die Möglichkeit, das in die Online-Terminbuchung integrierte Framework zur Layout und Farbgebung (Bootstrap) komplett zu deaktivieren. Diese Option sollte nur aktiviert werden, wenn die Homepage bereits eine eigene, ggf. angepasste Bootstrap-Version verwendet. (Optional, "false" wenn nicht angegeben) |
Möglichkeiten zur Verwendung eigener Farben - neu -
Damit sich die Farbgebung der Online-Terminbuchung nicht komplett von der einbindenden Homepage unterscheidet, bietet die neue Version einige CSS-Variablen an, mit deren Hilfe sich einige farbliche Hervorhebungen individuell anpassen lassen. Diese können auf der Webseite z.B. wie folgt festgelegt werden:
<html>
<head>
<!-- [...] -->
<style>
#pss {
--pss-infos-underline-color: fuchsia;
--pss-tab-underline-color: #ff0000;
--pss-tab-selected-underline-color: green;
--pss-slots-button-selected-color: blueviolet;
--pss-appname-color: yellow;
}
</style>
</head>
<body>
<!-- [...] -->
</body>
</html>
Unterstreichung von Informationstiteln
Variablenname: --pss-infos-underline-color
Bestimmt die Farbe der Unterstreichung von Leistungsketten im Termine-Teaser und der während der einzelnen Schritte der Online-Terminbuchung ausgewählten Informationen:
Unterstreichung von Reitern/Tabs
Variablenname: --pss-tab-underline-color und --pss-tab-selected-underline-color
Bestimmt die Standardfarbe der Unterstreichung von Tabs bzw. die Farbe des ausgewählten Tabs im Schritt Rechtliches (AGB / Datenschutzhinweise / Impressum):
Hinweis: Der Schritt wird übersprungen, wenn das Patienty den AGBs bereits zugestimmt hat.
Auswahl der Tageszeiten
Variablenname: --pss-slots-button-selected-color
Bestimmt die Hintergrundfarbe von ausgewählten Zeiträumen in der Terminsuche bzw. der Auswahl für die Warteliste:
Titel der online Terminbuchung
Variablenname: --pss-appname-color
Bestimmt die Schriftfarbe des Titels "ONLINE TERMINBUCHUNG":
Möglichkeiten zur Verwendung einer eigenen Schriftart - neu -
Die Schriftart, welche in der online Terminbuchung zum Einsatz kommt, kann angepasst werden. Standardmäßig wird die Schriftart verwendet, welche im von uns eingesetzten Bootstrap definiert ist. So kann die Änderung der Schriftart auf der Webseite festgelegt werden:
<html>
<head>
<!-- [...] -->
<style>
#pss {
--pss-font-family: 'NotoSans', 'Helvetica', sans-serif;
}
</style>
</head>
<body>
<!-- [...] -->
</body>
</html>
Wird die Variable --pss-font-family nicht in der Webseite definiert, so wird eine für den Rest der Webseite gesetzte Schriftart von der online Terminbuchung ggf. ignoriert.
Möglichkeiten zum Definieren des Layouts - neu -
PSS/OT erlaubt die grundlegende Anpassung einiger definierter Bereiche. Hiermit lässt sich die Aufteilung der Inhalte an die eigene Webseite anpassen und bei Bedarf kann z.B. eine Gestaltung mit Boxen umgesetzt werden.
<html>
<head>
<!-- [...] -->
<style>
#pss-main {
}
#pss-video {
}
#pss-teaser {
}
#pss-floating {
}
#pss-wrapper {
}
</style>
</head>
<body>
<!-- [...] -->
</body>
</html>
Es kann das Layout für folgende Bereiche über ihre HTML ID definiert werden:
- pss-main: der Hauptbereich der online Terminbuchung in dem die Erfassung der Daten und Buchung der Termine erfolgt
- pss-video: der Bereich, in welchem bei Bedarf ein Video für die Praxis bzw. Ersttermine/Folgetermine dargestellt wird
- pss-teaser: der Bereich in welchem nicht nächst möglichen freien Termine (Teaser) angezeigt werden
- pss-floating: ein Bereich, welcher die Bereiche für Videos und Termin-Teaser zusammenfasst
- pss-wrapper: ein Bereich, welcher alle genannten Bereiche zusammenfasst
Für diese Bereiche kann die Positionierung und Größe definiert sowie die Außen-/Innenabstände, Rahmen, Abrundung von Ecken und Hintergründe angepasst werden, um die Anmutung besser an die eigene Webseite anzupassen.
Alle anderen Elemente und Bereiche der Online-Terminbuchung können/dürfen bei der Einbettung nicht angepasst werden, da sich die Strukturen jederzeit ändern können und dadurch eine korrekte Funktion nicht sichergestellt werden kann.
Anzeige nächster freier Termin / Teaser
Mit Programmierkenntnissen in JavaScript kann die API in die eigene Homepage eingebunden werden. Dort wird Klienty dann schon vor dem Einstieg in die Online-Buchung direkt der nächste freie Termin angezeigt.
Wie das geht, zeigen wir unter PSS/OT auf deiner Homepage: Terminteaser einbinden.
Datenschutz
Bitte beachte unsere Hinweise dazu unter PSS/ OT: Datenschutz - Online-Terminkalender auf der eigenen Website.
Wordpress
Im Forum hat unser Kunde Rupprecht eine Anleitung veröffentlicht, wie das PSS/OT in Wordpress eingebunden werden kann. Vielleicht ist das auch für dich interessant?
Fragen dazu bitte im Forum stellen, wir können für Wordpress keinen Support anbieten.
User-helfen-Usern: Einbindung PSS/OT in Wordpress