Integracja z platformą

Wyniki regat, listę zgłoszeń albo klasyfikację rankingu możesz pokazać bezpośrednio na własnej stronie internetowej – np. na stronie klubu, organizatora czy związku klasowego. Wystarczy wkleić do strony krótki fragment kodu JavaScript wygenerowany w panelu Upwind24. Osadzona tabela sama pobiera najnowsze dane, więc nowe wyniki czy zgłoszenia pojawią się na Twojej stronie bez żadnej dodatkowej pracy.

Zanim zaczniesz

• Potrzebujesz konta Upwind24 – wystarczy dowolny typ konta. Ustawienia integracji znajdziesz w menu panelu: Profil → Integracja z platformą.
• Osadzić możesz tabele dowolnych regat i rankingów opublikowanych w Upwind24, nie tylko własnych. Funkcja nie zależy od pakietu regatowego.
• Potrzebujesz możliwości edycji kodu HTML strony, na której ma się pojawić tabela (np. bloku Własny HTML w systemie CMS).

Jak to działa?

Strona Integracja z platformą składa się z trzech kart:

• Token dostępu – unikalny klucz Twojego konta, który osadzony kod dołącza do każdego zapytania o dane.
• Autoryzowane domeny – lista domen, na których osadzone tabele mogą się wyświetlać.
• Osadzanie tabel – generator gotowego kodu do wklejenia na stronę.

Tabela wyświetli się tylko wtedy, gdy kod zawiera poprawny token, a strona, na której go wkleisz, należy do jednej z autoryzowanych domen. Dzięki temu nikt nie użyje Twojego kodu na innej stronie.

Krok 1: Sprawdź token dostępu

Token jest tworzony automatycznie przy pierwszym wejściu na stronę Integracja z platformą. Nie musisz go kopiować ręcznie – generator kodu wstawia go do kodu za Ciebie.

Jeśli potrzebujesz tokena w innym miejscu, kliknij ikonę kopiowania w polu Token dostępu – zobaczysz komunikat Token dostępu skopiowany do schowka.

Ponowne wygenerowanie tokena

Przycisk Wygeneruj ponownie tworzy nowy token i od razu unieważnia dotychczasowy. Wszystkie tabele osadzone ze starym tokenem przestaną się wyświetlać, dopóki nie podmienisz kodu na stronach. Generuj token ponownie tylko wtedy, gdy masz ku temu powód – np. gdy chcesz odciąć stronę, której nie kontrolujesz.

Krok 2: Dodaj autoryzowane domeny

1. Na karcie Autoryzowane domeny kliknij Edytuj.

2. W polu Domeny wpisz domeny stron, na których osadzisz tabele – po jednej w każdym wierszu.

3. Kliknij Zapisz zmiany. Zobaczysz komunikat Autoryzowane domeny zostały zaktualizowane.

Jak wpisywać domeny:

• example.com – tylko sama domena example.com.
• *.example.com – wszystkie subdomeny, np. www.example.com czy wyniki.example.com, ale nie sama domena example.com. Jeśli Twoja strona działa pod oboma adresami, dodaj oba wiersze, tak jak na zrzucie powyżej.
• Możesz też wkleić pełny adres strony – protokół, port i ścieżka zostaną pominięte, np. https://www.example.com/wyniki oznacza domenę www.example.com.
• Domena obejmuje zarówno adresy http://, jak i https://, z dowolnym portem.

Wskazówka

Chcesz najpierw sprawdzić tabelę na swoim komputerze? Dodaj do listy wiersz localhost – tabela wyświetli się wtedy także na stronie uruchomionej lokalnie, np. pod adresem http://localhost:3000. Po wdrożeniu strony możesz ten wiersz usunąć.

Krok 3: Wygeneruj kod osadzenia

1. Na karcie Osadzanie tabel wybierz Rodzaj tabeli:

   • Wyniki regat – klasyfikacje wszystkich dywizji regat,
   • Lista zgłoszeń – zgłoszenia do regat w podziale na dywizje,
   • Klasyfikacja rankingu – klasyfikacje wybranego rankingu.

2. W polu Regaty (albo Ranking – dla klasyfikacji rankingu) zacznij wpisywać nazwę i wybierz pozycję z listy.

3. Wybierz Język tabeli: Polski lub English. W tym języku wyświetlą się nagłówki kolumn, pole wyszukiwania i komunikaty tabeli.

4. Jeśli Twoja strona ma ciemne tło, zaznacz Ciemny motyw tabeli.

5. Kliknij Wygeneruj kod osadzenia. Pod formularzem pojawi się gotowy kod – skopiuj go ikoną kopiowania w prawym górnym rogu.

Jeśli lista autoryzowanych domen jest pusta, nad formularzem zobaczysz ostrzeżenie – kod możesz wygenerować, ale tabela nie wyświetli się na żadnej stronie, dopóki nie dodasz domeny.

Krok 4: Wklej kod na swoją stronę

Wklej skopiowany kod w kodzie HTML strony, w miejscu, w którym ma się pojawić tabela. Wygenerowany kod wygląda tak:

<div id="upwind24-table"></div>

<script src="https://api.upwind24.com/embed/script.js?key=TWÓJ_TOKEN&callback=initUpwind24Table&lang=pl" async defer></script>
<script>
    function initUpwind24Table() {
        new Upwind24.Results(document.getElementById('upwind24-table'), 'ID_REGAT', {
            onLoad: function () {
                // Callback after the table is loaded
            }
        });
    }
</script>

Kod składa się z trzech części:

• <div id="upwind24-table"> – kontener, w którym wyświetli się tabela. Tabela dopasowuje się do jego szerokości.
• <script src="…/embed/script.js?…"> – skrypt Upwind24 z Twoim tokenem (key), nazwą funkcji startowej (callback), językiem tabeli (lang) i opcjonalnie ciemnym motywem (dark=1).
• funkcja initUpwind24Table() – skrypt wywołuje ją po załadowaniu i tworzy w niej tabelę dla wybranych regat lub rankingu.

Po zapisaniu strony tabela od razu pokaże aktualne dane:

Co widzą odwiedzający Twoją stronę?

• Wybór klasyfikacji – lista rozwijana Klasyfikacja (w wynikach i rankingu) lub Dywizja (na liście zgłoszeń) przełącza tabelę między dywizjami i grupami.
• Wyszukiwanie – pole Szukaj filtruje tabelę, np. po nazwisku, klubie czy numerze na żaglu.
• Sortowanie – kliknięcie nagłówka kolumny sortuje tabelę według tej kolumny.
• Dopasowanie do szerokości – kolumny, które nie mieszczą się na ekranie (np. wyniki poszczególnych wyścigów na telefonie), są ukrywane. Strzałka na początku wiersza rozwija go i pokazuje ukryte dane.

Kolumny tabel są takie same jak na stronie regat w Upwind24: tabela wyników pokazuje kolumny wybrane w ustawieniach wyników regat, a lista zgłoszeń – kolumny z ustawień listy zgłoszeń. Tabela wyników pokazuje wyłącznie opublikowane wyniki.

Wskazówka

Wybierz Język tabeli zgodny z językiem strony, na której osadzasz tabelę. Jeśli Twoja strona ma wersję polską i angielską, wygeneruj dwa kody – każdy z innym językiem – i wklej je w odpowiednich wersjach strony.

Zaawansowane: kilka tabel na jednej stronie

Wygenerowany kod tworzy jedną tabelę. Jeśli na jednej stronie chcesz pokazać kilka tabel – np. wyniki i listę zgłoszeń – załaduj skrypt raz, dodaj osobny kontener z innym id dla każdej tabeli i utwórz wszystkie tabele w jednej funkcji startowej:

<div id="upwind24-results"></div>
<div id="upwind24-entries"></div>

<script src="https://api.upwind24.com/embed/script.js?key=TWÓJ_TOKEN&callback=initUpwind24Tables&lang=pl" async defer></script>
<script>
    function initUpwind24Tables() {
        new Upwind24.Results(document.getElementById('upwind24-results'), 'ID_REGAT');
        new Upwind24.Entries(document.getElementById('upwind24-entries'), 'ID_REGAT', { dark: true });
    }
</script>

Dostępne rodzaje tabel:

Wyniki regat

new Upwind24.Results(element, 'ID_LUB_SLUG_REGAT', options);

Lista zgłoszeń

new Upwind24.Entries(element, 'ID_LUB_SLUG_REGAT', options);

Klasyfikacja rankingu

new Upwind24.Ranking(element, 'ID_LUB_SLUG_RANKINGU', options);

Zamiast identyfikatora z wygenerowanego kodu możesz podać slug regat lub rankingu – końcówkę ich adresu w Upwind24 (np. regaty-o-puchar-zatoki-2026).

Parametry adresu skryptu:

Parametr	Opis
key	Twój token dostępu. Wymagany.
callback	Nazwa globalnej funkcji wywoływanej po załadowaniu skryptu – w niej tworzysz tabele.
lang	Język tabel: pl lub en. Bez tego parametru skrypt użyje języka strony (atrybut lang znacznika <html>), a gdy to niemożliwe – angielskiego.
dark	1 włącza ciemny motyw wszystkich tabel na stronie.

Opcje tabeli (trzeci argument, opcjonalny):

Opcja	Opis
onLoad	Funkcja wywoływana po wyświetleniu tabeli na stronie.
dark	true lub false – motyw tej jednej tabeli, niezależnie od parametru dark skryptu.

Pytania i odpowiedzi

Zamiast tabeli widzę komunikat „Nie udało się połączyć z serwerem Upwind24.”. Co jest nie tak?

Najczęściej strona, na której osadzono kod, nie należy do żadnej z autoryzowanych domen – przeglądarka blokuje wtedy pobieranie danych. Sprawdź, czy lista zawiera dokładnie tę domenę, którą widzisz w pasku adresu (z www albo bez), oraz czy token w kodzie nie został wygenerowany ponownie – w takim przypadku wygeneruj kod jeszcze raz i podmień go na stronie.

Tabela pokazuje komunikat „Brak opublikowanych wyników.”. Dlaczego?

Organizator nie opublikował jeszcze wyników żadnej dywizji. Tabela wyświetli je automatycznie po publikacji – nie musisz niczego zmieniać w kodzie. Na liście zgłoszeń odpowiednikiem jest komunikat Brak otrzymanych zgłoszeń.

Czy muszę aktualizować kod po każdym wyścigu?

Nie. Kod wskazuje regaty lub ranking, a nie konkretne dane – tabela pobiera najnowsze wyniki i zgłoszenia przy każdym wyświetleniu strony. Kod podmieniasz tylko po ponownym wygenerowaniu tokena albo gdy chcesz pokazać inne regaty.

Co dalej?

Ustawienia regatWybierz kolumny tabeli wyników i listy zgłoszeń.

Wyniki i punktacjaWprowadzaj i publikuj wyniki, które pojawią się w osadzonej tabeli.