Website-Einbindung

Buchungsplan, Vereins-Feed und einen Buchungs-Button als Widget auf der Vereinswebsite einbinden.

Mit einer Website-Einbindung zeigst du Inhalte aus CheckCourt direkt auf der Seite deines Vereins: die Platzbelegung, Neuigkeiten aus „Mein Verein“ oder einen Button, der zur Buchung führt. Besucher sehen die Inhalte, ohne sich anzumelden, und du pflegst sie weiterhin nur an einer Stelle, nämlich in CheckCourt.

Jede Einbindung hat einen eigenen Code und eigene Einstellungen. Du kannst beliebig viele anlegen, zum Beispiel einen ausführlichen Buchungsplan auf der Unterseite und einen schlanken Buchungs-Button auf der Startseite.

Einbindung anlegen

Öffne Admin → Website-Einbindung
Klicke auf Einbindung erstellen
Wähle die Art des Widgets
Vergib einen Namen. Der ist nur für dich, damit du mehrere Einbindungen auseinanderhältst
Trage die Domain deiner Vereinswebsite ein, zum Beispiel tc-musterstadt.de
Klicke auf Erstellen

Danach erscheint die Einbindung als Karte mit dem fertigen Snippet.

Die Domain entscheidet

Das Widget lädt ausschließlich auf den Domains, die du hier hinterlegst. Auf jeder anderen Seite bleibt es leer. Trage deshalb genau die Adresse ein, unter der deine Website erreichbar ist.

Das Snippet

Auf der Karte findest du zwei Zeilen HTML. Über Kopieren landen sie in der Zwischenablage:

<div data-checkcourt="emb_7f3a91c4b28e"></div>
<script src="https://app.checkcourt.de/embed.js" async></script>

Die erste Zeile ist der Platzhalter: Genau dort erscheint das Widget. Die zweite Zeile lädt das Ladeprogramm, das den Platzhalter durch das Widget ersetzt und dafür sorgt, dass es immer genau so hoch ist wie sein Inhalt.

Beide Zeilen gehören in den Inhalt deiner Seite. Die Reihenfolge spielt keine Rolle, und das Script schadet nicht, wenn es mehrfach auf der Seite steht.

WordPress

WordPress ist der häufigste Fall. Je nach Editor gibt es drei Wege.

Block-Editor (Gutenberg)

Der Standard seit WordPress 5.0.

Öffne die Seite oder den Beitrag zum Bearbeiten
Klicke an der gewünschten Stelle auf + und suche nach dem Block Individuelles HTML (englisch: Custom HTML)
Füge das Snippet in den Block ein
Über Vorschau im Block siehst du nur einen leeren Kasten, das ist normal: Der Editor führt kein JavaScript aus
Klicke auf Aktualisieren und sieh dir die Seite im Frontend an

Klassischer Editor

Öffne die Seite zum Bearbeiten
Wechsle oben rechts vom Reiter Visuell auf Text
Füge das Snippet an der gewünschten Stelle ein
Speichere und prüfe die Seite im Frontend

Nicht im visuellen Modus einfügen

Der visuelle Editor filtert <script>-Tags heraus. Nutze immer den Reiter Text beziehungsweise den Block Individuelles HTML.

Soll das Widget auf allen Seiten erscheinen, zum Beispiel der Buchungs-Button:

Öffne Design → Widgets
Ziehe ein Individuelles HTML-Widget in den gewünschten Bereich, etwa Seitenleiste oder Footer
Füge das Snippet ein und speichere

Elementor, Divi und andere Page-Builder

Elementor: Widget HTML in den Abschnitt ziehen, Snippet einfügen
Divi: Modul Code verwenden
WPBakery: Element Raw HTML
Beaver Builder: Modul HTML

Alle Baukästen haben ein Element für eigenen HTML-Code, meist heißt es HTML, Code oder Embed.

Sicherheits-Plugins wie Wordfence oder iThemes können Scripts in Beiträgen blockieren. Prüfe die Einstellung „unfiltered_html“
WordPress.com erlaubt eigenes JavaScript erst ab dem Business-Tarif. Nutze dort die iframe-Variante weiter unten
Caching-Plugins liefern manchmal eine alte Version der Seite aus. Leere den Cache nach dem Einfügen

Andere Systeme

Das Snippet ist normales HTML und funktioniert überall, wo du eigenen Code einfügen darfst.

System	Wo einfügen
Jimdo	Element Widget/HTML
Wix	Einbetten → HTML-Code einbetten
Squarespace	Block Code
Typo3	Inhaltselement Reiner HTML-Code
Joomla	Editor auf Quelltext umschalten, oder Modul Eigenes HTML
Contao	Inhaltselement HTML
Statische Website	Direkt in die HTML-Datei an die gewünschte Stelle

Mehrere Widgets auf einer Seite

Du kannst beliebig viele Widgets auf derselben Seite einbinden. Jedes bekommt seinen eigenen Platzhalter, das Script brauchst du nur einmal:

<div data-checkcourt="emb_7f3a91c4b28e"></div>
<div data-checkcourt="emb_a91c4b28e7f3"></div>

<script src="https://app.checkcourt.de/embed.js" async></script>

Höhe steuern

Die Höhe passt sich automatisch an den Inhalt an, auch wenn sich dieser ändert, etwa beim Blättern zum nächsten Tag. Bis das Widget geladen ist, gilt eine Starthöhe von 420 Pixeln. Springt dein Layout dadurch sichtbar, gib eine passendere Starthöhe vor:

<div data-checkcourt="emb_7f3a91c4b28e" data-height="240"></div>

Einbinden ohne Script

Wenn dein System kein JavaScript zulässt, bindest du das Widget direkt als iframe ein. Die Höhe ist dann fest, der Inhalt scrollt bei Bedarf innerhalb des Rahmens:

<iframe
  src="https://app.checkcourt.de/embed/emb_7f3a91c4b28e"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="Platzbelegung"
></iframe>

Über Einstellungen auf der Karte legst du fest, was Besucher sehen. Die Voreinstellungen sind bewusst sparsam, mehr zeigst du bewusst.

Buchungsplan

Sichtbare Details: nur frei oder belegt, zusätzlich die Buchungsart, oder mit Namen. Namen erscheinen nur, soweit die Buchungs-Privatsphäre sie auch anderen Mitgliedern zeigt
Tage im Voraus: wie weit Besucher nach vorne blättern dürfen. Bei 1 zeigt das Widget nur den heutigen Tag, ganz ohne Blätterpfeile. Zurück in die Vergangenheit geht es nie
Platzsperren anzeigen
Button „Platz buchen“: führt zur Anmeldung in CheckCourt

Mein Verein

Ankündigungen, Termine und Beiträge einzeln zuschaltbar. Beiträge von Mitgliedern sind standardmäßig aus
Namen der Verfasser: aus, solange du sie nicht brauchst. Beiträge des CheckCourt-Teams zeigen ihren Absender immer
Bilder und Anzahl der Zusagen. Namen von Teilnehmern erscheinen nie
Anzahl der Einträge

Link zum Buchungsportal

Überschrift und Beschriftung des Buttons frei wählbar
Freie Plätze anzeigen: zeigt, wie viele Plätze gerade frei sind. Schaltest du das aus, gibt der Button nichts über den Verein preis

Zusätzlich wählst du je Einbindung ein Farbschema, hell oder dunkel.

Vorschau

Über Vorschau auf der Karte siehst du das Widget genau so, wie es auf der Vereinswebsite erscheint, inklusive der automatischen Höhe. Das funktioniert auch, bevor du das Snippet auf deiner Seite eingebaut hast.

Wenn nichts erscheint

„Für diese Domain nicht freigegeben“

Die Adresse deiner Website steht nicht in der Liste. Achte auf die genaue Schreibweise, die Freigabe gilt exakt für das eingetragene Adressmuster:

www.tc-musterstadt.de und tc-musterstadt.de sind zwei verschiedene Einträge. Trage beide ein, wenn deine Seite unter beiden erreichbar ist
http:// und https:// sind ebenfalls verschieden. Moderne Seiten laufen über https://
Eine Testumgebung wie staging.tc-musterstadt.de braucht einen eigenen Eintrag

Ergänzen kannst du Domains jederzeit unter Einstellungen → Erlaubte Domains, bis zu zehn pro Einbindung.

Der Bereich bleibt komplett leer

Prüfe, ob die Einbindung pausiert ist. Das siehst du am Hinweis auf der Karte
Prüfe, ob das Snippet vollständig eingefügt wurde, also beide Zeilen
Hat deine Website eine eigene Content-Security-Policy, muss sie sowohl script-src https://app.checkcourt.de für das Ladeprogramm als auch frame-src https://app.checkcourt.de für das Widget selbst erlauben. Das betrifft nur Seiten, die so etwas bewusst eingerichtet haben

Das Widget war da und ist plötzlich weg

Wurde der Code neu erzeugt, funktioniert das alte Snippet nicht mehr. Kopiere das neue von der Karte und ersetze es auf deiner Website.

Code neu erzeugen, pausieren, löschen

Über das Menü mit den drei Punkten auf der Karte:

Pausieren: Das Widget verschwindet von der Website, die Einstellungen bleiben erhalten. Praktisch für die Winterpause
Code neu erzeugen: Erzeugt einen neuen Code. Nutze das, wenn ein Code an unbefugter Stelle auftaucht. Das bisherige Snippet hört sofort auf zu funktionieren, du musst das neue auf deiner Website einsetzen
Löschen: Entfernt die Einbindung endgültig

Alle drei Aktionen stehen im Aktivitätsprotokoll.

Datenschutz

Das Widget ist bewusst zurückhaltend gebaut:

Es setzt keine Cookies und lädt keine Drittanbieterskripte
Es zeigt ausschließlich, was du in den Einstellungen freigegeben hast
Es läuft nur auf den Domains, die du hinterlegt hast. Das prüft der Server bei jedem Aufruf, zusätzlich verweigert der Browser das Einbetten auf fremden Seiten

Für deine Datenschutzerklärung ist relevant, dass der Inhalt des Widgets von app.checkcourt.de geladen wird und dabei, wie bei jedem Seitenaufruf, die IP-Adresse des Besuchers an unseren Server übertragen wird. Zeigst du im Buchungsplan Namen oder im Vereins-Feed Beiträge und Verfasser, werden diese Angaben öffentlich sichtbar. Kläre in dem Fall ab, ob deine Mitglieder damit einverstanden sind.