Die lemniscus-Online-Terminvergabe, kurz my/OT, 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-Terminvergabe meistens so unterschiedlich sind, was es die Online-Terminvergabe 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-Terminvergabe eingeschaltet ist, in der Kachel "Portale" zu finden:
Einbindung durch Einbettung
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-Terminvergabe 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
}
document.write("<script type='text/javascript' src='" + pssConfig.host
+ "/lem/app.nocache-pss.js?v=" + Date.now() + "'><\/script>");
</script>
Wenn du Leistungsketten für die Online-Terminvergabe eingestellt, Arbeitszeiten und Tageszeiten definiert und my/OT aktiviert hast, findest du deinen Token in der Kachel "Portale" Markiere dazu das gewünschte Portal und klicke auf "Token kopieren".
Zusätzlich muss im Body-Bereich folgendes “div”-Element an der Stelle auf der Seite eingetragen werden, in der die Online-Terminvergabe eingeblendet werden soll:
<div id="pss"></div>
Anforderungen für die Einbettung - neu -
Es muss darauf geachtet werden, dass dem Inhalt der Online-Terminvergabe 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-Terminvergabe 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
}
| Option | Beschreibung |
| host | Zeigt auf den Server, mit dem die Online-Terminvergabe 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-Terminvergabe 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 Orga-Daten im unteren Bereich ein. Wenn die Online-Terminvergabe auf der eigenen Homepage eingebunden wird, ist das meistens nicht nötig. (Optional, "false" wenn nicht angegeben) |
Möglichkeiten zur Verwendung eigener Farben - neu -
Damit sich die Farbgebung der Online-Terminvergabe 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-Terminvergabe 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 Klienty den AGB 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-Terminvergabe
Variablenname: --pss-appname-color
Bestimmt die Schriftfarbe des Titels "ONLINE-TERMINVERGABE":
Möglichkeiten zur Verwendung einer eigenen Schriftart - neu -
Die Schriftart, welche in der Online-Terminvergabe 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-Terminvergabe ggf. ignoriert.
Möglichkeiten zum Definieren des Layouts - neu -
my/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-Terminvergabe 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-Terminvergabe 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-Terminvergabe direkt der nächste freie Termin angezeigt.
Wie das geht, zeigen wir unter my/OT auf deiner Homepage: Terminteaser einbinden.
Datenschutz
Bitte beachte unsere Hinweise dazu unter my/OT: Datenschutz - Online-Terminkalender auf der eigenen Website.
Wordpress
Im Forum hat unser Kunde Rupprecht eine Anleitung veröffentlicht, wie my/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 my/OT in Wordpress