--- title: "my/OT auf deiner Website: Terminteaser einbinden" slug: "my-ot-auf-deiner-website-terminteaser-einbinden" tags: ["OnlineRezeption", "myOT"] updated: 2026-06-17T10:25:21Z published: 2026-06-17T10:25:21Z canonical: "helpdesk.lemniscus.de/my-ot-auf-deiner-website-terminteaser-einbinden" --- > ## Documentation Index > Fetch the complete documentation index at: https://helpdesk.lemniscus.de/llms.txt > Use this file to discover all available pages before exploring further. # my/OT auf deiner Website: Terminteaser einbinden Wenn du den Teaser nicht nur über die [von lemniscus bereitgestellte Online-Vergabeseite](/office/docs/my-ot-termin-teaser-vorschau-auf-den-nächsten-termin) nutzen möchtest, sondern ihn in die eigene Homepage einbinden willst, musst du entweder keine Angst vor dem Codieren haben oder dir jemanden zur Hilfe holen, der Programmierkenntnisse in JavaScript hat.. Da es sich bei der Teaser-Funktion um eine Programmierschnittstelle handelt, ist so ziemlich alles an der Anzeige anpassbar. Hier ein Beispiel, wie so etwas aussehen könnte: ![](https://cdn.document360.io/5750fed4-ea7a-4277-aeea-9dd034cfa51d/Images/Documentation/22119586163996.png) ## Was liefert die Teaser-API für Daten? Die Teaser-API liefert über einen Web-Aufruf reine Datenschnipsel, die dann von der Webseite verarbeitet werden müssen. Der Programmiercode auf deiner Seite ist dafür zuständig, die Daten abzuholen und in etwas Lesbares umzuwandeln. Um die Daten abzuholen, muss der Code auf deiner Seite den folgenden Aufruf tätigen: ```plaintext https://my.lemniscus.de/mvc/pss/teaser?token=DEIN_PSS_TOKEN ``` ### **Daten-Dokumentation** Das JSON-Objekt enthält verschiedene Schlüssel (Keys) und Werte (Values), die Informationen über Teaser-Elemente für Termine darstellen. Die Struktur des JSON-Objekts ist wie folgt aufgebaut: #### **Top-Level Schlüssel** - **errorMessage**: Ein String, der Fehlermeldungen enthält. Wenn leer, bedeutet dies, dass keine Fehler aufgetreten sind. - **teasers**: Ein Array von Objekten, jedes repräsentiert Teaser für eine Leistung. #### `teasers` **Array** Jedes Objekt im `teasers` Array kann folgende Schlüssel enthalten: - **sortKey**: Ein String, der für Sortierungszwecke verwendet werden kann. Wenn leer, gibt es keine spezifische Sortiervorgabe. - **title**: Der Titel der Leistung. - **description**: Eine Beschreibung der Leistung - **videoUrl**: Eine URL zu einem Video, das mit der Leistung verknüpft ist. Wenn leer, gibt es kein zugehöriges Video. - **date**: Das Datum und die Uhrzeit des Beginns des Termins im ISO 8601 Format. - **formattedDate**: Das Datum des Termins in einem benutzyfreundlichen Format. - **formattedTime**: Die Uhrzeit des Termins in einem benutzyfreundlichen Format. - **teaserDates**: Ein Array von Tagen, für die Termine-Teaser gefunden wurden. ##### `teaserDates` **Array** Jedes Objekt im `teaserDates` Array beinhaltet: - **date**: Das Datum und die Uhrzeit des Termins im ISO 8601 Format. - **formattedDate**: Das Datum in einem benutzyfreundlichen Format. - **teaserDateTimes**: Ein Array von Objekten, die spezifische Zeiten für jeden Termin auflisten. ###### `teaserDateTimes` Array Jedes Objekt im `teaserDateTimes` Array enthält: - **date**: Das genaue Datum und die Uhrzeit der spezifischen Instanz des Termins im ISO 8601 Format. - **formattedDate**: Das Datum dieser spezifischen Instanz in einem benutzyfreundlichen Format. - **formattedTime**: Die Uhrzeit dieser spezifischen Instanz in einem benutzyfreundlichen Format. ## Beispielcode Dieses Helpdesk-Dokument wird keine Einführung in die Programmierung ersetzen. Wir können aber einen Beispiel-Code anbieten, so kann man einen Blick in den Maschinenraum wagen... Es gibt unglaublich viele Wege, Dinge in JavaScript umzusetzen. Für unser Beispiel hier haben wir die JavaScript-Bibliotheken jQuery und Bootstrap eingesetzt. Wir gehen in dem Beispiel nicht so weit und zeigen alle Termine an, sondern nur die frühesten Terminoptionen. Will man alle Optionen anzeigen, dann muss der Code entsprechend den eigenen Wünschen angepasst werden. ### HTML Code An dem HTML Code erkennt man (vielleicht), dass die oben angezeigten Texte aus dem Code entstammen und dadurch komplett anpassbar sind. ```plaintext

Wann ist der nächste Termin bei mir frei?

Direkt online einen Termin reservieren?

Ja, Du kannst bei mir Termine direkt online reservieren! Damit ich mehr Zeit für dich habe, erfasse ich über die Online- Terminvergabe deine Kontaktdaten und deine Anschrift. Oder du rufst einfach an und sprichst mir auf Band, ich melde mich dann bei dir!

online Termin buchen
``` ### JavaScript Code In dem JavaScript code werden die Daten geladen und in das HTML Code eingewoben. ```plaintext const token = 'DEIN_TOKEN_AUS_DEN_EINSTELLUNGEN_HIER_EINFÜGEN'; $('#pssLink').attr('href', 'https://my.lemniscus.de/pss.html?token=' + token); $.getJSON('https://my.lemniscus.de/mvc/pss/teaser?token=' + token, function(res) { if (res.errorMessage) { $('#termine').append('

Oh-oh: ' + res.errorMessage + '

'); } else { res.teasers.forEach(function(t) { $('#termine').append( '
  • ' + t.title + ' am ' + t.formattedDate + ' um ' + t.formattedTime + ' Uhr
    • ' ); }); } }) .fail( function() { $('#termine').append('

    Fehler beim Laden der Termine

    '); } ); ``` Du kannst dir den Code online & live unter der folgenden URL anschauen und ausprobieren: [https://jsfiddle.net/lemniscus/j9qgv06p/6/](https://jsfiddle.net/lemniscus/j9qgv06p/6/) Wichtig: im JavaScript-Code musst du dein my/OS-Token eintragen. ## Related - [lemmyFlansch für my/OT (Flanschi)](/lemmy-flansch-beta-für-my-ot.md)