Mit den Web Components von Swiss Unihockey können Sie beispielsweise Spielpläne, Resultate und Ranglisten auf Ihrer Vereinswebsite anzeigen. Die Inhalte werden von Swiss Unihockey bereitgestellt und können über das HTML/JS-Element in das Fairgate CMS eingebunden werden.
Diese Anleitung zeigt Ihnen die Einrichtung anhand eines Mannschaftsspielplans. Welche weiteren Web Components verfügbar sind und wie diese konfiguriert werden, erfahren Sie in der offiziellen Dokumentation von Swiss Unihockey.
1. Voraussetzungen
Bevor Sie beginnen, benötigen Sie:
Eine Freigabe durch Swiss Unihockey: Registrieren Sie sich für die Nutzung der Web Components. Die Nutzung ist für Vereine kostenlos. Informationen und das Registrierungsformular finden Sie auf der Seite Swiss Unihockey – Infos für Webmaster.
Die passenden IDs: Für die Anzeige einzelner Mannschaften benötigen Sie beispielsweise die jeweilige Team-ID. Weitere Komponenten verwenden unter anderem Vereins-, Liga- oder Gruppenangaben. Diese finden Sie über den Vereins-ID-Finder von Swiss Unihockey.
Zugriff auf das Fairgate CMS: Sie müssen die gewünschte Seite Ihrer Website bearbeiten können.
Hinweis: Die früheren Klick-In-Codes (iFrames) von Swiss Unihockey werden zur Saison 2026/27 durch die neuen Web Components abgelöst.
2. HTML/JS-Element auf der gewünschten Seite einfügen
Melden Sie sich in Ihrem Fairgate-Mandanten an und wechseln Sie in den Bereich Webseite.
Öffnen Sie im oberen Menü CMS → Navigation & Seiten. Navigieren Sie anschliessend zur gewünschten Seite, auf der Sie den Spielplan anzeigen möchten.
Ziehen Sie das Element HTML/JS aus der Elemente-Toolbar an die gewünschte Position auf der Seite.
Warum HTML/JS? Fairgate stellt solche externen Inhalte aus Sicherheitsgründen in einem gekapselten iFrame dar. Sie müssen dafür kein zusätzliches iFrame-Element anlegen und auch keinen eigenen
<iframe>-Code schreiben.
3. Beispielcode für einen Mannschaftsspielplan einfügen
Kopieren Sie den folgenden vollständigen HTML-Code in das HTML/JS-Element. Er enthält sowohl die benötigte CSS- und JavaScript-Einbindung als auch die Web Component für den Spielplan einer Mannschaft.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiss Unihockey – Mannschaftsspielplan</title>
<!-- Swiss Unihockey: CSS für die Darstellung -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/swissunihockey/swissunihockey-webcomponents@master/swissunihockey-webcomponents.css">
<!-- Swiss Unihockey: JavaScript für die Funktion -->
<script type="module"
src="https://cdn.jsdelivr.net/gh/swissunihockey/swissunihockey-webcomponents@master/swissunihockey-webcomponents.js"></script>
</head>
<body>
<!-- Spielplan einer Mannschaft -->
<uniho-team-games
season="2026"
team-id="IHRE_TEAM_ID"
page-size="5">
</uniho-team-games>
</body>
</html>Wichtig: Der Code enthält einen Platzhalter für die Team-ID. Solange dieser nicht durch eine gültige ID ersetzt wurde, kann der Spielplan nicht korrekt angezeigt werden.
Die CSS- und JavaScript-Dateien werden in diesem Beispiel über einen externen Dateidienst (CDN) geladen. Sie müssen dafür keine Dateien selbst hochladen. Die Bereitstellung und Weiterentwicklung der Web Components erfolgt durch Swiss Unihockey.
4. Code an Ihre Mannschaft anpassen
Im obigen Beispiel passen Sie die folgenden Werte an:
| Angabe | Bedeutung | Beispiel |
|---|---|---|
team-id | ID der Mannschaft, deren Spiele angezeigt werden sollen | Durch Ihre eigene Team-ID ersetzen |
season | Jahr, in dem die gewünschte Saison beginnt | 2026 für die Saison 2026/27 |
page-size | Anzahl Spiele pro Seite | 5 |
Die Team-ID ermitteln Sie über den ID-Finder von Swiss Unihockey.
Möchten Sie den Spielplan einer anderen Mannschaft anzeigen, verwenden Sie deren Team-ID. Für jede Mannschaftsseite können Sie ein eigenes HTML/JS-Element mit dem entsprechend angepassten Code einfügen.
Bitte beachten: Verändern Sie die beiden Dateilinks für CSS und JavaScript nicht. Für das gezeigte Beispiel müssen Sie nur die Angaben an der Spielplan-Komponente anpassen.
5. Speichern und Darstellung überprüfen
Speichern Sie die Einstellungen des HTML/JS-Elements.
Öffnen Sie die entsprechende Seite und kontrollieren Sie, ob die Spieldaten angezeigt werden.
Falls Inhalte unten abgeschnitten werden, erhöhen Sie die maximale Höhe des HTML/JS-Elements. Die benötigte Höhe hängt vom Umfang der angezeigten Inhalte ab.
Falls keine Inhalte erscheinen
Prüfen Sie zunächst, ob die Team-ID, die Saison und der eingefügte Code korrekt sind. Externe CSS- und JavaScript-Dateien müssen ausserdem geladen werden können; das kann durch Sicherheitseinstellungen eingeschränkt sein.
Wenn die Einbindung trotz korrekter Angaben im Fairgate CMS nicht funktioniert, wenden Sie sich bitte an unseren Support. Wir prüfen gerne die Einbindung im CMS. Bei Fragen zu den Web Components selbst oder zu den gelieferten Spieldaten wenden Sie sich bitte direkt an Swiss Unihockey.
6. Weitere Web Components verwenden
Swiss Unihockey stellt neben Mannschaftsspielplänen weitere Komponenten zur Verfügung, beispielsweise für Vereinsspiele, Ligaspiele, Ranglisten und Topscorer.
Den jeweiligen HTML-Code und die benötigten Parameter finden Sie in der offiziellen Anleitung:
Das Vorgehen im Fairgate CMS bleibt gleich: HTML/JS-Element einfügen, benötigte Dateien einbinden, gewünschten Komponenten-Code einsetzen und die passenden IDs hinterlegen. Beachten Sie, dass die erforderlichen IDs je nach Komponente unterschiedlich sind.
7. Unterstützung durch Fairgate
Benötigen Sie Unterstützung bei der Einbindung in das Fairgate CMS, können Sie sich gerne an unseren Fairgate Support wenden.
Auf Wunsch kann unser Webdesign-Team die Einrichtung auch für Sie übernehmen. Teilen Sie uns dafür bitte mit, welche Inhalte auf welchen Seiten dargestellt werden sollen. Anhand dieser Angaben klären wir den Aufwand und erstellen bei Bedarf eine entsprechende Offerte.
Hinweis zu Drittanbieter-Inhalten: Die Web Components, ihre technischen Funktionen und die angezeigten Daten werden von Swiss Unihockey bereitgestellt. Fairgate kann dafür keine Funktionsgarantie übernehmen. Bei Fragen zu den verfügbaren Komponenten, deren Parametern oder den Daten selbst ist Swiss Unihockey der richtige Ansprechpartner.
Weiterführende Informationen