Wie kann ich die Reservationstabelle (Widget) auf meiner Webseite einbinden?

Die Reservationstabelle kannst du direkt auf deiner Webseite als Widget einbinden. Deine Mitglieder und Kunden sehen so schon auf der eigenen Seite die Verfügbarkeit der Plätze und können in vertrauter Umgebung buchen.
Bitte füge dazu einfach untenstehenden Code in dein Webseiten-Element ein (HTML/JS). Ein Beispiel, wie das auf deiner Webseite aussehen kann, finest du hier beim TC Eggersriet.

HTML-Code erstellen
Bitte passe untenstehenden Code mit deiner Club ID an. Diese findest du, wenn du als Spieler über www.gotcourts.com deinen Club aufrufst. Die Club ID ist eine mehrstellige Nummer und sieht so aus:

clb_11e7461dcc2d3786a7376545076843b59922

Achtung: Einige CMS (Webseitenprogramme) blockieren die HTML-Elemente aus Datenschutzgründen. Sollte die Darstellung in einem HTML Element nicht funktionieren, versuche es über ein normales Text-Element, das du in der HTML-Ansicht bearbeitest, d.h. den selben Code einfach dort einfügst.

<div id="gotcourts-calendar" data-club="clb_00000000000000000000000000000000" style="height: 500px"></div>

<script>
(function(w, d) {
var s = d.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://apps.gotcourts.com/newplayer/widget.js";
var p = d.getElementsByTagName("script")[0];
p.parentNode.insertBefore(s, p);
w.addEventListener("load", function() {
const data = d.querySelector('#gotcourts-calendar').dataset;
const config = {
clubs: data.club ? [data.club] : ("" + data.clubs).split(","),
language: data.language || "de"
}
gcCalendar(config);
});
})(window, document);
</script>

Mehrere Anlagen einbinden
Es gibt auch die Möglichkeit Reservationstabellen von mehreren Anlagen einzubinden. In diesem Fall musst du einfach weitere Clubnamen in der 'div-Zeile' anpassen und 'data-club' auf 'data-clubs' ändern.

<div id="gotcourts-calendar" data-clubs="clb_000000000000000000000000000000, clb_000000000000000000000000000001"></div>

Falls das Javascript zu Problemen in diversen Browsern führt, kann man die Tabelle auch mit einem einfachen HTML-iFrame einbinden, der Code wäre dann:

Die Höhe der Tabelle kann man mit dieser Zahl anpassen (height="XXXX")

"width=100%" beschreibt, dass die Tabelle die ganze breite der Webseite ausfüllen soll.