Zwiększ zasięg, osadzając widżety SidewaysData bezpośrednio na swojej stronie. Wyświetlaj swoje wydarzenia i wyniki na żywo tam, gdzie odwiedza już Twoja publiczność — za pomocą zaledwie jednej linii kodu.

Dlaczego warto używać widżetów?

• Jedna linia kodu - Po prostu wklej tag skryptu na swoją stronę
• Zawsze aktualne - Wydarzenia i wyniki synchronizują się automatycznie z SidewaysData
• Brak konieczności konserwacji - My zajmujemy się wszystkimi aktualizacjami i usprawnieniami
• Profesjonalny wygląd - Dopieszczony, responsywny design działający na każdym urządzeniu
• Bezpłatne - Wliczone w SidewaysData bez dodatkowych kosztów

Dostępne widżety

Widżet Znajdź wydarzenia

Wyświetl filtrowalną listę swoich wydarzeń. Odwiedzający mogą przeglądać według roku, statusu rejestracji, rodzaju wydarzenia i innych. Idealne na stronę wydarzeń lub stronę główną.

Dowiedz się więcej o widżecie Znajdź wydarzenia

Widżet wyników na żywo

Pokaż wyniki wyścigu w czasie rzeczywistym podczas wydarzeń. Zawiera czat na żywo dla widzów i automatycznie przełącza się między "Wyniki na żywo" a "Wyniki końcowe" w zależności od czasu wydarzenia.

Dowiedz się więcej o widżecie Wyniki na żywo

Rozpoczęcie

1. Znajdź swój identyfikator organizatora lub identyfikatory wydarzeń (zobacz Uzyskiwanie identyfikatorów)
2. Wybierz, którego widżetu potrzebujesz
3. Skopiuj kod osadzania i wklej go na swoją stronę
4. Dostosuj za pomocą opcjonalnych atrybutów konfiguracyjnych

Wymagania

Widżety działają na każdej stronie obsługującej JavaScript. Obejmuje to WordPress, Squarespace, Wix, niestandardowe strony HTML oraz większość kreatorów stron. Będziesz potrzebować możliwości dodawania niestandardowego HTML lub tagów skryptów na swoje strony.

Aby skonfigurować widżety, będziesz potrzebować identyfikatora organizatora i opcjonalnie konkretnych identyfikatorów wydarzeń. Oto jak je znaleźć.

Znajdowanie identyfikatora organizatora

Twój identyfikator organizatora pojawia się w adresie URL podczas przeglądania strony organizatora na SidewaysData.

1. Przejdź do sidewaysdata.com
2. Przejdź do swojej strony organizatora
3. Spójrz na adres URL — będzie w formacie: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Na przykład, jeśli Twój adres URL to sidewaysdata.com/organizer/example-motorsports, Twój identyfikator organizatora to example-motorsports.

Znajdowanie identyfikatorów wydarzeń

Identyfikatory wydarzeń znajdują się w adresach URL poszczególnych wydarzeń oraz w panelu organizatora.

Z adresu URL wydarzenia

1. Przejdź do dowolnego ze swoich wydarzeń na SidewaysData
2. Spójrz na adres URL — będzie zawierał identyfikator wydarzenia po /events/

Na przykład: sidewaysdata.com/events/12345 oznacza, że identyfikator wydarzenia to 12345.

Z panelu organizatora

1. Zaloguj się do SidewaysData
2. Przejdź do swojej Strony Wydarzeń
3. Identyfikator wydarzenia jest wyświetlany na liście wydarzeń lub widoczny w linkach

Korzystanie z narzędzi deweloperskich przeglądarki

Jeśli masz problem ze znalezieniem identyfikatorów:

1. Kliknij prawym przyciskiem myszy na stronie organizatora lub wydarzenia
2. Wybierz "Zbadaj" lub "Zbadaj element"
3. Szukaj atrybutów danych lub adresów URL zawierających identyfikator

Potrzebujesz pomocy?

Jeśli nie możesz znaleźć swoich identyfikatorów, skontaktuj się z pomocą techniczną SidewaysData, a pomożemy Ci je odnaleźć.

Widżet Find Events wyświetla listę wydarzeń z możliwością filtrowania na Twojej stronie. Odwiedzający mogą przeglądać nadchodzące wydarzenia, filtrować według różnych kryteriów i przechodzić dalej, aby zarejestrować się lub zobaczyć szczegóły na SidewaysData.

What It Displays

• Karty wydarzeń z nazwą, datą, lokalizacją i statusem rejestracji
• Rozwijane filtry dla roku, typu wydarzenia, statusu rejestracji i możliwości wolontariatu
• Bezpośrednie linki do stron wydarzeń na SidewaysData
• Responsywny układ dopasowujący się do każdego rozmiaru ekranu

Basic Embed Code

Add this script tag to your website where you want the events to appear:

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

Replace your-organizer-id with your actual organizer ID (see Jak uzyskać swoje identyfikatory).

Default Behavior

Without additional configuration, the widget will:

• Wyświetla wszystkie wydarzenia od określonego(ych) organizatora(ów)
• Wyświetla rozwijane filtry dla roku, typu wydarzenia, statusu rejestracji i możliwości wolontariatu
• Sortuje wydarzenia według daty (najstarsze pierwsze)
• Uwzględnia wydarzenia o dowolnym statusie rejestracji

How It Works

Widżet tworzy responsywny iframe, który ładuje zawartość z SidewaysData. Iframe automatycznie dopasowuje swoją wysokość do zawartości, więc wewnątrz widżetu nie występuje przewijanie. Wydarzenia są synchronizowane z Twoim kontem SidewaysData — wszelkie wprowadzone zmiany są odzwierciedlane automatycznie.

Next Steps

• Skonfiguruj widżet z opcjonalnymi atrybutami
• Zobacz typowe przykłady dla różnych zastosowań

Dostosuj widżet Find Events za pomocą atrybutów data na tagu script. Wszystkie atrybuty są opcjonalne z wyjątkiem określenia, które wydarzenia mają być wyświetlane.

Określanie wydarzeń

Musisz dołączyć co najmniej jeden z tych atrybutów, aby określić, które wydarzenia mają być wyświetlane:

data-organizer-ids

Pokaż wszystkie wydarzenia od określonych organizatorów. Użyj wartości rozdzielonych przecinkami dla wielu organizatorów.

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

Wielu organizatorów:

<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

Pokaż tylko określone wydarzenia według ich identyfikatorów. Użyj wartości rozdzielonych przecinkami dla wielu wydarzeń.

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

Opcje filtrowania

data-event-status

Filtrowanie wydarzeń według statusu rejestracji. Wartości: open, closed, lub any.

data-event-status="open"

data-default-reg-status

Ustaw domyślną wartość listy rozwijanej statusu rejestracji. To wstępnie wybiera opcję filtru, ale nadal pozwala odwiedzającym na jej zmianę.

data-default-reg-status="open"

data-limit-organizer-event-types

Jeśli ustawione na true, pokaż tylko typy wydarzeń, których organizator rzeczywiście używa, zamiast wszystkich dostępnych typów w rozwijanym menu.

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

data-hide-volunteers-dropdown

Jeśli ustawione na true, ukryj rozwijaną listę filtrowania ofert wolontariatu.

data-hide-volunteers-dropdown="true"

Opcje wyświetlania

data-is-results-mode

Jeśli ustawione na true, pokaż wydarzenia, dla których dostępne są wyniki, zamiast nadchodzących wydarzeń. Przydatne na stronie "Past Results".

data-is-results-mode="true"

data-newest-first

Jeśli ustawione na true, sortuj wydarzenia od najnowszych, zamiast domyślnego porządku od najstarszych.

data-newest-first="true"

Opcje zaawansowane

data-origin

Użyj niestandardowej domeny zamiast domyślnej sidewaysdata.com. Potrzebne tylko, jeśli skonfigurowałeś niestandardową domenę w SidewaysData.

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

Pełny przykład

Oto przykład użycia kilku opcji konfiguracyjnych:

<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>

To wyświetla wydarzenia z otwartą rejestracją od "example-motorsports", pokazuje w filtrze tylko odpowiednie typy wydarzeń, ukrywa rozwijaną listę wolontariatu i sortuje wydarzenia od najnowszych.

Typowe konfiguracje dla widżetu Find Events, aby dopasować do różnych przypadków użycia.

Show All Your Events

Wyświetl wszystkie wydarzenia Twojej organizacji ze wszystkimi dostępnymi opcjami filtrów:

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

Show Only Open Registration

Wyświetl tylko wydarzenia z otwartą rejestracją:

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

Show Events with Results

Utwórz stronę "Past Results" pokazującą wydarzenia, które mają wyniki pomiaru czasu:

<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>

Show Specific Events

Wyświetl tylko konkretne wydarzenia, takie jak seria mistrzostw:

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

Show Events from Multiple Organizers

Wyświetl wydarzenia z kilku organizatorów na stronie regionalnej lub serii:

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

Simplified View (Minimal Filters)

Pokaż wydarzenia z czytelniejszym interfejsem, ukrywając rzadziej używane filtry:

<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 (Open Events, Newest First)

Typowa konfiguracja dla strony głównej Twojej witryny:

<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>

Default to Open Registration Filter

Pokaż wszystkie wydarzenia, ale ustaw domyślnie filtr rejestracji na "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>

This differs from data-event-status="open" because visitors can still change the filter to see closed events.

Widżet Wyniki na żywo wyświetla wyniki wyścigów w czasie rzeczywistym na Twojej stronie. Widzowie mogą śledzić przebieg wydarzeń na żywo i oglądać wyniki końcowe po zakończeniu — wszystko bez opuszczania Twojej strony.

Co wyświetla

• Wyniki w czasie rzeczywistym podczas trwania wydarzeń
• Wskaźnik „Wyniki na żywo” lub „Wyniki końcowe” w zależności od czasu trwania wydarzenia
• Wbudowany czat na żywo obsługiwany przez FastComments do interakcji widzów
• Automatyczne aktualizacje w miarę rejestrowania nowych czasów

Podstawowy kod osadzenia

Dodaj ten znacznik skryptu na swojej stronie tam, gdzie chcesz, aby pojawiły się wyniki:

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

Zastąp your-organizer-id swoją rzeczywistą wartością identyfikatora organizatora (zobacz Uzyskiwanie identyfikatorów).

Uwaga: Widżet Wyniki na żywo wymaga atrybutu data-organizer-id. Widżet nie załaduje się bez niego.

Jak to działa

Widżet tworzy responsywny iframe, który łączy się z systemem pomiaru czasu SidewaysData. Podczas aktywnego wydarzenia:

• Wyniki aktualizują się w czasie rzeczywistym w miarę rejestrowania czasów
• Widżet pokazuje „Wyniki na żywo”, aby wskazać, że pomiar czasu jest w toku
• Czat na żywo pozwala widzom dyskutować o wydarzeniu

Po zakończeniu wydarzenia:

• Wyniki pozostają dostępne do przeglądania
• Widżet przełącza się na wskaźnik „Wyniki końcowe”
• Historia czatu jest zachowana

Przypadki użycia

• Dzień wydarzenia - Osadź na stronie głównej, aby widzowie mogli śledzić na żywo
• Dedykowana strona z wynikami - Utwórz stałą stronę z wynikami na swojej witrynie
• Strona docelowa na media społecznościowe - Udostępnij link do strony z wynikami podczas wydarzeń

Następne kroki

• Skonfiguruj widżet z opcjonalnymi atrybutami

Widżet Live Results ma minimalną konfigurację — wymagany jest jedynie identyfikator organizatora.

Wymagany atrybut

data-organizer-id

Twój identyfikator organizatora SidewaysData. Jest on wymagany, aby widżet działał poprawnie.

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

Zobacz Jak uzyskać swoje identyfikatory, aby dowiedzieć się, jak znaleźć swój identyfikator organizatora.

Opcjonalny atrybut

data-origin

Użyj niestandardowej domeny zamiast domyślnej sidewaysdata.com. Wymagane tylko wtedy, gdy masz skonfigurowaną niestandardową domenę w SidewaysData.

<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>

Pełny przykład

Typowe osadzenie Live Results:

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

Obsługa błędów

Jeśli atrybut data-organizer-id będzie brakować, widżet zaloguje błąd w konsoli przeglądarki i nie zostanie wyrenderowany. Upewnij się, że zawierasz ten wymagany atrybut.

Wskazówki dotyczące umieszczenia

• Umieść widżet w kontenerze o odpowiedniej szerokości (zalecane co najmniej 320px)
• Widżet automatycznie dostosowuje wysokość do zawartości
• Rozważ umieszczenie powyżej linii zagięcia (above the fold) w dni wydarzeń, aby uzyskać maksymalną widoczność
• Dobrze sprawdza się jako główna zawartość dedykowanej strony "Live Results"

Widżety SidewaysData są osadzane jako iframe, co ogranicza bezpośrednie stylowanie CSS. Możesz jednak kontrolować, jak widżety dopasowują się do układu strony.

Stylowanie kontenera

Owiń widżet w element kontenera, aby kontrolować jego położenie i maksymalną szerokość:

<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>

Kontrola szerokości

Widżety automatycznie rozszerzają się do 100% szerokości kontenera. Kontroluj szerokość, stylując element nadrzędny:

<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>

Zachowanie wysokości

Wysokość widżetu dostosowuje się automatycznie do zawartości. Iframe używa postMessage, aby przekazać wymagane wymiary wysokości do Twojej strony, eliminując paski przewijania wewnątrz widżetu.

Responsywność

Widżety zostały zaprojektowane jako responsywne i dobrze działają na urządzeniach mobilnych. Automatycznie dostosowują się do węższych ekranów. Dla najlepszych rezultatów:

• Używaj szerokości kontenera opartych na procentach lub elastycznych
• Unikaj ustawiania stałych szerokości w pikselach, które mogą powodować poziome przewijanie na urządzeniach mobilnych
• Testuj na różnych rozmiarach ekranów

Kompatybilność z tłem

Widżety mają jasne tło i zostały zaprojektowane tak, aby dobrze wyglądać na stronach o jasnym kolorze tła. Jeśli Twoja strona ma ciemne tło, rozważ umieszczenie widżetu w kontenerze o jasnym kolorze tła:

<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>

Ograniczenia stylowania iframe

Ponieważ widżety używają iframe, nie można bezpośrednio stylować zawartości wewnątrz nich (np. czcionek, kolorów czy stylów przycisków). Zawartość widżetu używa standardowego stylu SidewaysData, aby zapewnić spójny, profesjonalny wygląd.

Jeśli masz konkretne wymagania dotyczące identyfikacji wizualnej, skontaktuj się z pomocą SidewaysData, aby omówić możliwe opcje.

Dodawanie marginesów i odstępów

Dodaj odstępy wokół widżetu za pomocą standardowego CSS na kontenerze:

<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>

Typowe problemy i rozwiązania przy używaniu widżetów SidewaysData.

Widget Not Appearing

Check the script URL

Upewnij się, że atrybut src skryptu wskazuje poprawny URL:

• 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

Check required attributes

• Widżet Find Events wymaga albo data-organizer-ids albo data-event-ids
• Widżet Live Results wymaga data-organizer-id

Check for JavaScript errors

Otwórz konsolę deweloperską przeglądarki (zwykle F12 lub kliknij prawym przyciskiem → Zbadaj → Konsola) i sprawdź komunikaty o błędach. Widżet Live Results zgłasza błąd, jeśli brakuje data-organizer-id.

Verify your IDs are correct

Sprawdź dokładnie, czy identyfikatory organizatora i wydarzeń zgadzają się z tym, co jest widoczne w SidewaysData. Zobacz Getting Your IDs.

Wrong Events Showing

Check organizer ID spelling

Identyfikatory organizatorów rozróżniają wielkość liter. Upewnij się, że identyfikator dokładnie odpowiada temu, co pojawia się w adresie URL SidewaysData.

Check filter settings

Jeśli używasz data-event-status="open" ale nie widzisz żadnych wydarzeń, możliwe że nie masz wydarzeń z otwartymi zapisami. Spróbuj usunąć ten filtr, aby zobaczyć wszystkie wydarzenia.

Check results mode

Jeśli ustawiono data-is-results-mode="true", widżet pokazuje wydarzenia z wynikami, a nie nadchodzące wydarzenia. Usuń ten atrybut, aby zobaczyć nadchodzące wydarzenia.

Widget Height Issues

Widget appears cut off

Widżet powinien automatycznie dopasować swoją wysokość. Jeśli zawartość wydaje się obcięta:

1. Sprawdź, czy żaden element nadrzędny nie ma ustawionego overflow: hidden
2. Upewnij się, że żaden CSS nie ustawia stałej wysokości na iframe
3. Zweryfikuj, czy w przeglądarce jest włączony JavaScript

Excessive empty space

Jeśli poniżej widżetu jest zbyt dużo pustej przestrzeni, automatyczne dopasowanie wysokości powinno to obsłużyć. Jeśli nie, widżet może się ładować, ale nie ma wydarzeń do wyświetlenia.

Content Not Updating

Events not showing recent changes

Widżety ładują świeżą zawartość z SidewaysData przy każdym załadowaniu strony. Jeśli zmiany się nie pojawiają:

1. Wykonaj twarde odświeżenie strony (Ctrl+F5 lub Cmd+Shift+R)
2. Wyczyść pamięć podręczną przeglądarki
3. Poczekaj kilka minut — niektóre zmiany mogą chwilę zajmować, zanim się rozpowszechnią

Live results not updating

Podczas pomiaru na żywo wyniki powinny aktualizować się automatycznie. Jeśli tak się nie dzieje:

1. Zweryfikuj, czy wydarzenie jest aktywnie mierzone na SidewaysData
2. Odśwież stronę
3. Sprawdź połączenie z internetem

Website Builder Issues

WordPress

Jeśli używasz WordPressa, może być konieczne:

• Użycie bloku lub widżetu "Custom HTML"
• Tymczasowe wyłączenie wtyczek blokujących skrypty
• Sprawdzenie, czy motyw nie usuwa tagów skryptu z treści

Squarespace

Użyj elementu "Code Block" lub "Embed" i wklej tag skryptu bezpośrednio.

Wix

Użyj funkcji "HTML iframe" lub "Custom Element", aby dodać skrypt.

Cross-Origin Issues

Widżety ładują zawartość z serwerów SidewaysData. Jeśli widzisz błędy cross-origin:

1. Upewnij się, że używasz https:// (nie http://) dla URL skryptu
2. Jeśli używasz data-origin, sprawdź, czy domena jest poprawnie skonfigurowana

Still Having Issues?

Jeśli próbowałeś tych rozwiązań i widżet nadal nie działa poprawnie, skontaktuj się z pomocą SidewaysData z następującymi informacjami:

• URL strony, na której osadzasz widżet
• Pełny tag skryptu, którego używasz
• Wszelkie komunikaty o błędach z konsoli przeglądarki
• Opis tego, czego oczekujesz, a co się dzieje