Erweitern Sie Ihre Reichweite, indem Sie SidewaysData-Widgets direkt auf Ihrer eigenen Website einbetten. Zeigen Sie Ihre Veranstaltungen und Live-Ergebnisse dort an, wo Ihr Publikum bereits unterwegs ist – mit nur einer einzigen Codezeile.

Warum Widgets verwenden?

• Eine Zeile Code - Fügen Sie einfach ein Script-Tag in Ihre Website ein
• Immer auf dem neuesten Stand - Veranstaltungen und Ergebnisse synchronisieren sich automatisch mit SidewaysData
• Keine Wartung - Wir übernehmen alle Updates und Verbesserungen
• Professionelles Erscheinungsbild - Gepflegtes, responsives Design, das auf jedem Gerät funktioniert
• Kostenlos - In SidewaysData ohne zusätzliche Kosten enthalten

Verfügbare Widgets

Find Events-Widget

Zeigen Sie eine filterbare Liste Ihrer Veranstaltungen an. Besucher können nach Jahr, Registrierungsstatus, Veranstaltungstyp und mehr filtern. Perfekt für Ihre Veranstaltungsseite oder die Startseite.

Erfahren Sie mehr über das Find Events-Widget

Live Results-Widget

Zeigen Sie während Ihrer Veranstaltungen Echtzeit-Ergebnislisten an. Enthält einen Live-Chat für Zuschauer und wechselt automatisch zwischen "Live Results" und "Final Results" basierend auf dem Veranstaltungszeitplan.

Erfahren Sie mehr über das Live Results-Widget

Erste Schritte

1. Finden Sie Ihre Veranstalter-ID oder Event-IDs (siehe Abrufen Ihrer IDs)
2. Wählen Sie das benötigte Widget
3. Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihre Website ein
4. Passen Sie es mit optionalen Konfigurationsattributen an

Voraussetzungen

Widgets funktionieren auf jeder Website, die JavaScript unterstützt. Dazu gehören WordPress, Squarespace, Wix, benutzerdefinierte HTML-Seiten und die meisten Website-Builder. Sie benötigen die Möglichkeit, benutzerdefiniertes HTML oder Script-Tags zu Ihren Seiten hinzuzufügen.

Um Widgets zu konfigurieren, benötigen Sie Ihre Organizer-ID und optional bestimmte Event-IDs. So finden Sie diese.

Finden Ihrer Organizer-ID

Ihre Organizer-ID erscheint in der URL, wenn Sie Ihre Organizer-Seite auf SidewaysData ansehen.

1. Gehen Sie zu sidewaysdata.com
2. Navigieren Sie zu Ihrer Organizer-Seite
3. Sehen Sie sich die URL an—sie hat folgendes Format: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Zum Beispiel, wenn Ihre URL sidewaysdata.com/organizer/example-motorsports ist, ist Ihre Organizer-ID example-motorsports.

Finden von Event-IDs

Event-IDs erscheinen in Event-URLs und in Ihrem Organizer-Dashboard.

Aus der Event-URL

1. Navigieren Sie zu einem Ihrer Events auf SidewaysData
2. Sehen Sie sich die URL an—sie enthält die Event-ID nach /events/

Zum Beispiel: sidewaysdata.com/events/12345 bedeutet, dass die Event-ID 12345 ist.

Aus Ihrem Dashboard

1. Melden Sie sich bei SidewaysData an
2. Gehen Sie zu Ihrer Events-Seite
3. Die Event-ID wird in der Veranstaltungsübersicht angezeigt oder ist in Links sichtbar

Verwendung der Entwicklertools des Browsers

Wenn Sie Schwierigkeiten haben, die IDs zu finden:

1. Klicken Sie mit der rechten Maustaste auf Ihre Organizer- oder Event-Seite
2. Wählen Sie "Untersuchen" oder "Element untersuchen"
3. Suchen Sie nach Datenattributen oder URLs, die die ID enthalten

Brauchen Sie Hilfe?

Wenn Sie Ihre IDs nicht finden können, kontaktieren Sie den SidewaysData-Support und wir helfen Ihnen, sie zu finden.

Das Find Events-Widget zeigt eine filterbare Liste von Veranstaltungen auf Ihrer Website an. Besucher können bevorstehende Veranstaltungen durchsehen, nach verschiedenen Kriterien filtern und klicken, um sich zu registrieren oder Details auf SidewaysData anzusehen.

Was es anzeigt

• Veranstaltungskarten mit Name, Datum, Ort und Anmeldestatus
• Filter-Dropdowns für Jahr, Veranstaltungstyp, Anmeldestatus und Freiwilligenmöglichkeiten
• Direkte Links zu Veranstaltungsseiten auf SidewaysData
• Responsives Layout, das sich an jede Bildschirmgröße anpasst

Grundlegender Einbettungscode

Fügen Sie dieses Script-Tag auf Ihrer Website dort ein, wo die Veranstaltungen erscheinen sollen:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

Ersetzen Sie your-organizer-id durch Ihre tatsächliche Organizer-ID (siehe Ihre IDs abrufen).

Standardverhalten

Ohne zusätzliche Konfiguration wird das Widget:

• Alle Veranstaltungen der angegebenen Organisator(en) anzeigen
• Filter-Dropdowns für Jahr, Veranstaltungstyp, Anmeldestatus und Freiwillige anzeigen
• Veranstaltungen nach Datum sortieren (älteste zuerst)
• Veranstaltungen mit beliebigem Anmeldestatus einschließen

Wie es funktioniert

Das Widget erstellt ein responsives iframe, das Inhalte von SidewaysData lädt. Das iframe passt seine Höhe automatisch an den Inhalt an, sodass es innerhalb des Widgets selbst kein Scrollen gibt. Veranstaltungen bleiben mit Ihrem SidewaysData-Konto synchronisiert — alle Änderungen, die Sie vornehmen, werden automatisch übernommen.

Nächste Schritte

• Konfigurieren Sie das Widget mit optionalen Attributen
• Siehe häufige Beispiele für verschiedene Anwendungsfälle

Passen Sie das Find Events-Widget mit Datenattributen im Script-Tag an. Alle Attribute sind optional, außer der Angabe, welche Veranstaltungen angezeigt werden sollen.

Specifying Events

Sie müssen mindestens eines dieser Attribute angeben, um festzulegen, welche Veranstaltungen angezeigt werden sollen:

data-organizer-ids

Zeigt alle Veranstaltungen bestimmter Veranstalter an. Verwenden Sie Komma-getrennte Werte für mehrere Veranstalter.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports">
</script>

Mehrere Veranstalter:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

data-event-ids

Zeigt nur bestimmte Veranstaltungen nach ihren IDs an. Verwenden Sie Komma-getrennte Werte für mehrere Veranstaltungen.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,67890">
</script>

Filtering Options

data-event-status

Filtert Veranstaltungen nach Registrierungsstatus. Werte: open, closed, oder any.

data-event-status="open"

data-default-reg-status

Legt den Standardwert für das Dropdown-Menü des Registrierungsstatus fest. Dies wählt eine Filteroption vorab aus, erlaubt Besuchern jedoch weiterhin, diese zu ändern.

data-default-reg-status="open"

data-limit-organizer-event-types

Wenn auf true gesetzt, werden nur Veranstaltungstypen angezeigt, die der Veranstalter tatsächlich verwendet, anstatt alle verfügbaren Veranstaltungstypen im Dropdown.

data-limit-organizer-event-types="true"

data-hide-volunteers-dropdown

Wenn auf true gesetzt, wird das Dropdown-Menü für Ehrenamtsmöglichkeiten ausgeblendet.

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

Wenn auf true gesetzt, werden Veranstaltungen angezeigt, für die Ergebnisse verfügbar sind, anstatt bevorstehender Veranstaltungen. Nützlich für eine Seite mit "Vergangenen Ergebnissen".

data-is-results-mode="true"

data-newest-first

Wenn auf true gesetzt, werden Veranstaltungen so sortiert, dass die neuesten zuerst angezeigt werden, anstatt der standardmäßigen älteste-zuerst-Reihenfolge.

data-newest-first="true"

Advanced Options

data-origin

Verwenden Sie eine benutzerdefinierte Domain anstelle der Standarddomain sidewaysdata.com. Nur erforderlich, wenn Sie eine benutzerdefinierte Domain mit SidewaysData konfiguriert haben.

data-origin="https://events.yourdomain.com"

Complete Example

Hier ein Beispiel mit mehreren Konfigurationsoptionen:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports"
  data-event-status="open"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true"
  data-newest-first="true">
</script>

Dies zeigt Veranstaltungen mit offener Registrierung von "example-motorsports" an, zeigt im Filter nur relevante Veranstaltungstypen, blendet das Ehrenamts-Dropdown aus und sortiert die neuesten Veranstaltungen zuerst.

Häufige Konfigurationen für das Find Events-Widget, um verschiedene Anwendungsfälle abzudecken.

Alle Ihre Veranstaltungen anzeigen

Zeigt alle Veranstaltungen Ihrer Organisation mit allen verfügbaren Filteroptionen an:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

Nur Veranstaltungen mit offener Registrierung anzeigen

Zeigt Veranstaltungen an, die derzeit Anmeldungen annehmen:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open">
</script>

Veranstaltungen mit Ergebnissen anzeigen

Erstellen Sie eine Seite "Vergangene Ergebnisse", die Veranstaltungen mit Zeitnahmeergebnissen anzeigt:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-is-results-mode="true"
  data-newest-first="true">
</script>

Bestimmte Veranstaltungen anzeigen

Zeigt nur bestimmte Veranstaltungen an, z. B. eine Meisterschaftsserie:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,12346,12347,12348">
</script>

Veranstaltungen mehrerer Veranstalter anzeigen

Zeigt Veranstaltungen mehrerer Organisationen auf einer Regional- oder Serienseite an:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

Vereinfachte Ansicht (minimale Filter)

Zeigt Veranstaltungen mit einer aufgeräumteren Benutzeroberfläche, indem weniger verwendete Filter ausgeblendet werden:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Homepage-Widget (offene Veranstaltungen, neueste zuerst)

Eine gängige Konfiguration für die Startseite Ihrer Website:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open"
  data-newest-first="true"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Filter für offene Registrierung als Standard

Zeigt alle Veranstaltungen an, aber setzt den Registrierungsfilter standardmäßig auf "open":

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-default-reg-status="open">
</script>

Dies unterscheidet sich von data-event-status="open", weil Besucher den Filter weiterhin ändern können, um geschlossene Veranstaltungen zu sehen.

Das Live-Ergebnisse-Widget zeigt Echtzeit-Rennergebnisse auf Ihrer Website an. Zuschauer können während der Veranstaltungen mitverfolgen und im Anschluss die Endergebnisse einsehen — alles, ohne Ihre Seite zu verlassen.

Was es anzeigt

• Echtzeit-Timing-Ergebnisse während Live-Veranstaltungen
• Indikator "Live-Ergebnisse" oder "Endergebnisse" basierend auf dem Veranstaltungszeitplan
• Integrierter Live-Chat, betrieben von FastComments, für die Zuschauerinteraktion
• Automatische Aktualisierungen, wenn neue Zeiten erfasst werden

Grundlegender Einbettungscode

Fügen Sie dieses script-Tag an der Stelle Ihrer Website ein, an der die Ergebnisse angezeigt werden sollen:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="your-organizer-id">
</script>

Ersetzen Sie your-organizer-id durch Ihre tatsächliche Organizer-ID (siehe So erhalten Sie Ihre IDs).

Hinweis: Das Live-Ergebnisse-Widget erfordert das Attribut data-organizer-id. Das Widget wird ohne dieses Attribut nicht geladen.

Wie es funktioniert

Das Widget erstellt ein responsives iframe, das sich mit dem Live-Timing-System von SidewaysData verbindet. Während einer aktiven Veranstaltung:

• Ergebnisse werden in Echtzeit aktualisiert, sobald Zeiten erfasst werden
• Das Widget zeigt "Live-Ergebnisse" an, um zu signalisieren, dass das Timing läuft
• Der Live-Chat ermöglicht es Zuschauern, die Veranstaltung zu diskutieren

Nach dem Ende der Veranstaltung:

• Ergebnisse bleiben zur Ansicht verfügbar
• Das Widget wechselt zur Anzeige "Endergebnisse"
• Der Chatverlauf bleibt erhalten

Anwendungsfälle

• Am Veranstaltungstag - Auf Ihrer Startseite einbetten, damit Zuschauer live mitverfolgen können
• Dedizierte Ergebnisseite - Erstellen Sie eine permanente Ergebnisseite auf Ihrer Website
• Landingpage für soziale Medien - Teilen Sie während der Veranstaltungen einen Link zu Ihrer Ergebnisseite

Nächste Schritte

• Widget konfigurieren mit optionalen Attributen

Das Live Results widget hat eine minimale Konfiguration — nur Ihre organizer ID ist erforderlich.

Erforderliches Attribut

data-organizer-id

Ihre SidewaysData organizer ID. Dies ist erforderlich, damit das Widget funktioniert.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

Siehe So finden Sie Ihre IDs für Hilfe beim Auffinden Ihrer organizer ID.

Optionales Attribut

data-origin

Verwenden Sie eine benutzerdefinierte Domain anstelle der Standarddomain sidewaysdata.com. Nur erforderlich, wenn Sie eine benutzerdefinierte Domain bei SidewaysData konfiguriert haben.

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports"
  data-origin="https://events.yourdomain.com">
</script>

Vollständiges Beispiel

Ein typisches Live Results-Embed:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

Fehlerbehandlung

Wenn das Attribut data-organizer-id fehlt, protokolliert das Widget einen Fehler in der Browser-Konsole und wird nicht gerendert. Stellen Sie sicher, dass Sie dieses erforderliche Attribut hinzufügen.

Platzierungstipps

• Platzieren Sie das Widget in einem Container mit ausreichender Breite (mindestens 320px empfohlen)
• Das Widget passt seine Höhe automatisch an den Inhalt an
• Platzieren Sie es an Veranstaltungstagen möglichst oberhalb des sichtbaren Bereichs für maximale Sichtbarkeit
• Funktioniert gut als Hauptinhalt einer dedizierten "Live Results"-Seite

SidewaysData-Widgets werden als iframes eingebettet, was direktes CSS-Styling einschränkt. Sie können jedoch steuern, wie die Widgets in Ihr Seitenlayout passen.

Container-Styling

Umschließen Sie das Widget mit einem Container-Element, um dessen Platzierung und maximale Breite zu steuern:

<div style="max-width: 1200px; margin: 0 auto;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Breitenkontrolle

Widgets dehnen sich automatisch auf 100% der Containerbreite aus. Steuern Sie die Breite durch Styling des übergeordneten Elements:

<div style="width: 100%; max-width: 800px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Höhenverhalten

Die Höhe des Widgets passt sich automatisch an den Inhalt an. Das iframe verwendet postMessage, um seine benötigte Höhe an Ihre Seite zu übertragen, wodurch Bildlaufleisten innerhalb des Widgets entfallen.

Responsives Design

Die Widgets sind für responsives Design ausgelegt und funktionieren gut auf mobilen Geräten. Sie passen sich automatisch an schmalere Bildschirme an. Für beste Ergebnisse:

• Verwenden Sie prozentbasierte oder flexible Containerbreiten
• Vermeiden Sie feste Pixelbreiten, die auf mobilen Geräten horizontales Scrollen verursachen könnten
• Testen Sie auf verschiedenen Bildschirmgrößen

Hintergrundkompatibilität

Die Widgets haben einen hellen Hintergrund und sind so gestaltet, dass sie auf hellen Seiten gut funktionieren. Wenn Ihre Website einen dunklen Hintergrund hat, sollten Sie das Widget in einem hellen Container platzieren:

<div style="background: #ffffff; padding: 20px; border-radius: 8px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Einschränkungen beim Styling von Iframes

Da Widgets iframes verwenden, können Sie den Inhalt darin nicht direkt stylen (z. B. Schriftarten, Farben oder Schaltflächenstile). Der Widget-Inhalt verwendet das Standard-Styling von SidewaysData, um ein konsistentes, professionelles Erscheinungsbild zu gewährleisten.

Wenn Sie spezifische Branding-Anforderungen haben, kontaktieren Sie den SidewaysData-Support, um Optionen zu besprechen.

Ränder und Abstände hinzufügen

Fügen Sie um das Widget herum Abstände hinzu, indem Sie Standard-CSS auf den Container anwenden:

<div style="margin: 40px 0;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Häufige Probleme und Lösungen bei der Verwendung von SidewaysData-Widgets.

Widget wird nicht angezeigt

Überprüfen Sie die Skript-URL

Stellen Sie sicher, dass das src-Attribut des Skripts auf die richtige URL verweist:

• Find Events: https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js
• Live Results: https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js

Überprüfen Sie erforderliche Attribute

• Find Events widget erfordert entweder data-organizer-ids oder data-event-ids
• Live Results widget erfordert data-organizer-id

Auf JavaScript-Fehler prüfen

Öffnen Sie die Entwicklerkonsole Ihres Browsers (in der Regel F12 oder Rechtsklick → Untersuchen → Konsole) und suchen Sie nach Fehlermeldungen. Das Live Results-Widget protokolliert einen Fehler, wenn data-organizer-id fehlt.

Überprüfen Sie, ob Ihre IDs korrekt sind

Prüfen Sie, ob die Organizer- und Event-IDs mit denen übereinstimmen, die auf SidewaysData angezeigt werden. Siehe So erhalten Sie Ihre IDs.

Falsche Events werden angezeigt

Überprüfen Sie die Schreibweise der Organizer-ID

Organizer-IDs sind case-sensitiv. Stellen Sie sicher, dass die ID genau mit der im SidewaysData-URL übereinstimmt.

Überprüfen Sie die Filtereinstellungen

Wenn Sie data-event-status="open" verwenden, aber keine Events sehen, haben Sie möglicherweise keine Events mit offener Anmeldung. Versuchen Sie, diesen Filter zu entfernen, um alle Events zu sehen.

Überprüfen Sie den Ergebnismodus

Wenn data-is-results-mode="true" gesetzt ist, zeigt das Widget Events mit Ergebnissen und nicht bevorstehende Events an. Entfernen Sie dieses Attribut, um bevorstehende Events zu sehen.

Probleme mit der Widget-Höhe

Widget wird abgeschnitten angezeigt

Das Widget sollte seine Höhe automatisch anpassen. Wenn Inhalte abgeschnitten erscheinen:

1. Überprüfen Sie, dass kein übergeordnetes Element overflow: hidden gesetzt hat
2. Stellen Sie sicher, dass kein CSS eine feste Höhe für das iframe setzt
3. Vergewissern Sie sich, dass JavaScript in Ihrem Browser aktiviert ist

Übermäßiger Leerraum

Wenn unter dem Widget zu viel Leerraum ist, sollte die automatische Höhenanpassung dies beheben. Falls nicht, kann es sein, dass das Widget geladen ist, aber keine Events zum Anzeigen vorhanden sind.

Inhalte werden nicht aktualisiert

Events zeigen keine aktuellen Änderungen

Widgets laden bei jedem Seitenaufruf frische Inhalte von SidewaysData. Wenn Änderungen nicht erscheinen:

1. Laden Sie die Seite komplett neu (Ctrl+F5 oder Cmd+Shift+R)
2. Löschen Sie den Browser-Cache
3. Warten Sie ein paar Minuten — manche Änderungen können ein wenig Zeit zur Verbreitung benötigen

Live-Ergebnisse aktualisieren sich nicht

Während der Live-Timing-Phase sollten Ergebnisse automatisch aktualisiert werden. Wenn dies nicht der Fall ist:

1. Vergewissern Sie sich, dass das Event auf SidewaysData aktiv gemessen wird
2. Aktualisieren Sie die Seite
3. Prüfen Sie Ihre Internetverbindung

Probleme mit Website-Buildern

WordPress

Wenn Sie WordPress verwenden, müssen Sie möglicherweise:

• Einen "Custom HTML"-Block oder -Widget verwenden
• Vorübergehend script-blockierende Plugins deaktivieren
• Prüfen, ob Ihr Theme Script-Tags aus Inhalten entfernt

Squarespace

Verwenden Sie einen "Code Block" oder ein "Embed"-Element und fügen Sie das Skript-Tag direkt ein.

Wix

Verwenden Sie die Funktion "HTML iframe" oder "Custom Element", um das Skript hinzuzufügen.

Cross-Origin-Probleme

Widgets laden Inhalte von den Servern von SidewaysData. Wenn Sie Cross-Origin-Fehler sehen:

1. Stellen Sie sicher, dass Sie https:// (nicht http://) für die Skript-URL verwenden
2. Wenn Sie data-origin verwenden, überprüfen Sie, ob die Domain korrekt konfiguriert ist

Haben Sie immer noch Probleme?

Wenn Sie diese Lösungen ausprobiert haben und das Widget immer noch nicht korrekt funktioniert, kontaktieren Sie den SidewaysData-Support mit:

• der URL der Seite, auf der Sie das Widget einbetten
• dem vollständigen Script-Tag, das Sie verwenden
• allen Fehlermeldungen aus der Browserkonsole
• einer Beschreibung dessen, was Sie erwarten vs. was passiert