my/OT: Online-Terminvergabe in die eigene Website einbinden

So integrierst du die Online-Terminvergabe in deine Homepage

Mit lemniscus kannst du deine Online-Terminvergabe (my/OT) direkt mit deiner Website verbinden. So können sich Patientys oder Klientys ohne Umwege einen Termin online in deiner Praxis buchen.

Dafür gibt es zwei Möglichkeiten:

• Verlinken (unsere Empfehlung)

• Einbetten (für Webdesignys mit HTML-/JavaScript-Kenntnissen)

In diesem Hilfeartikel zeigen wir dir beide Varianten und erklären, welche Lösung sich für welchen Anwendungsfall eignet.

Welche Einbindung ist die richtige?

Verlinkung (empfohlen)

Für die meisten Praxen ist eine einfache Verlinkung die beste Wahl. Dabei führt ein Button wie „Termin buchen“ oder „Online Termin vereinbaren“ auf deiner Homepage direkt zur Online-Terminvergabe.

Vorteile der Verlinkung

• schnell eingerichtet

• funktioniert zuverlässig auf Smartphones, Tablets und Desktop-Geräten

• keine Programmierkenntnisse erforderlich

• harmonische Darstellung auf deiner Homepage

Einbettung

Die Einbettung eignet sich vor allem für Webdesignys, die die Online-Terminvergabe direkt in eine bestehende Website integrieren möchten. Dafür sind HTML- und JavaScript-Kenntnisse erforderlich.
Falls deine Homepage von einer Agentur oder einem Webdesigny betreut wird, kannst du die folgenden Informationen einfach weitergeben.

Online-Terminvergabe per Link einbinden

Hinterlege dazu einfach den „my/OT-Link“ deiner Online-Terminvergabe auf deiner Homepage – zum Beispiel hinter einem Button wie „Termin buchen”:

Der “my/OT-Link” ist, sobald die Online-Terminvergabe eingeschaltet ist, in der Kachel "Portale" zu finden. Dort kannst du ihn einfach kopieren und auf deiner Website verwenden:

LemmyFlansch: Buttons und Terminteaser einbinden

Wenn du nur Buttons oder Termin-Teaser gezielt an beliebigen Stellen deiner Homepage einbinden möchtest, ohne die komplette Online-Terminvergabe einzubetten, ist LemmyFlansch die einfachste Lösung.

Flanschi richtet sich an Webdesignys oder Anwendys mit grundlegenden HTML-Kenntnissen. Die Einbindung ist deutlich einfacher als eine vollständige Einbettung der Online-Terminvergabe.

Online-Terminvergabe per HTML und JavaScript einbetten

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.

Voraussetzungen

Vor der Einbettung sollten folgende Punkte bereits eingerichtet sein:

• Online-Terminvergabe aktiviert

• Leistungsketten eingerichtet

• Arbeitszeiten definiert

• Tageszeiten eingerichtet

Anschließend findest du deinen Token in der Kachel "Portale" im Reiter “my/ot Tokens”. Markiere dazu das gewünschte Portal und klicke auf "Token kopieren".

JavaScript & HTML Container

Über die folgenden Optionen im JavaScript kannst du festlegen, welche Elemente in der eingebetteten Online-Terminvergabe angezeigt werden sollen.
Das 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>

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>

Technische Anforderungen für die Einbettung

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 Mindestbreite allerdings durch die Webseite sichergestellt werden. Dies kann entweder über das Setzen einer Mindestbreite für die Webseite oder die Angabe eines "Viewport" erreicht werden.

Als Beispiel haben wir das so auf unserer my/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

Bei der Einbettung stehen der Online-Terminvergabe verschiedene Konfigurationsoptionen zur Verfügung:

let pssConfig = {
    host: "https://my.lemniscus.de",
    token: "[===== DEIN TOKEN AUS DEN EINSTELLUNGEN =====]",
    showMainVideoTeaser: false,
    showTermineTeaser: true,
    showFooter: false
   }

Farben an dein Webdesign anpassen

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

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 direkt der nächste freie Termin angezeigt, bevor es einen Termin bucht.

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.

Extra-Tipp: 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