Wenn du den Teaser nicht nur über die von lemniscus bereitgestellte Online-Buchungsseite 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:
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:
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 benutzerfreundlichen Format.
- formattedTime: Die Uhrzeit des Termins in einem benutzerfreundlichen 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 benutzerfreundlichen 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 benutzerfreundlichen Format.
- formattedTime: Die Uhrzeit dieser spezifischen Instanz in einem benutzerfreundlichen 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.
<div class="container" style="margin:50px;">
<div class="card">
<div class="card-body">
<p class='lead mt-2'>Wann ist der nächste Termin bei mir frei?</p>
<ul id='termine' class="list-group ">
<!-- Termine werden hier automatisch eingefügt -->
</ul>
<p class='lead mt-5'>Direkt online einen Termin buchen?</p>
<p>
Ja, Du kannst bei mir Termine direkt online buchen!
Damit ich mehr Zeit für Dich habe, erfasse ich über die online
Terminbuchung deine Kontaktdaten und deine Anschrift.
Oder du rufst einfach an und sprichst mir auf Band,
ich melde mich dann bei dir!
</p>
</div>
<div class="card-body">
<a id="pssLink" class="btn btn-primary">online Termin buchen</a>
</div>
</div>
</div>
JavaScript Code
In dem JavaScript code werden die Daten geladen und in das HTML Code eingewoben.
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('<p>Oh-oh: ' + res.errorMessage + '</p>');
} else {
res.teasers.forEach(function(t) {
$('#termine').append(
'<li class="list-group-item">' + t.title +
' am ' + t.formattedDate +
' um ' + t.formattedTime +
' Uhr</li>'
);
});
}
})
.fail(
function() {
$('#termine').append('<p>Fehler beim Laden der Termine</p>');
}
);
Du kannst dir den Code online & live unter der folgenden URL anschauen und ausprobieren:
https://jsfiddle.net/lemniscus/j9qgv06p/6/
Wichtig: im JavaScript Code musst du dein PSS-Token eintragen.