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, links unten in den Einstellungen 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>

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.

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-steps-background-color: orange;
                --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>

Fortschrittsanzeige

Variablenname: --pss-steps-background-color

Bestimmt die Hintergrundfarbe der im oberen Bereich angezeigt Fortschrittsanzeige:

Wurde in der Konfiguration der Online-Terminbuchung die Fortschrittsanzeige ausgeblendet wird nur eine schmale Trennlinie in der angegebenen Farbe angezeigt.

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 Java Script kann die API auf der eigenen Homepage eingebunden werden. Patienty bekommt den nächsten freien Termin angezeigt, bevor überhaupt die Online-Buchung gestartet wurde.

Alle Infos dazu sind hier zu finden: PSS/OT (online Terminbuchung): Teaser

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