Proširite svoj doseg ugrađivanjem SidewaysData widgeta izravno na vlastitu web-stranicu. Prikažite svoje događaje i rezultate uživo tamo gdje vaša publika već posjećuje — s samo jednom linijom koda.

Zašto koristiti widgete?

• Jedna linija koda - Jednostavno zalijepite script tag na svoju web-stranicu
• Uvijek ažurno - Događaji i rezultati se automatski sinkroniziraju iz SidewaysData
• Bez održavanja - Mi se brinemo o svim ažuriranjima i poboljšanjima
• Profesionalan izgled - Dotjeran, responzivan dizajn koji radi na svakom uređaju
• Besplatno - Uključeno uz SidewaysData bez dodatnih troškova

Dostupni widgeti

Find Events Widget

Prikažite filtriranu listu svojih događaja. Posjetitelji mogu pregledavati po godini, statusu prijave, vrsti događaja i drugim kriterijima. Savršeno za stranicu s događajima ili početnu stranicu.

Saznajte više o Find Events widgetu

Live Results Widget

Prikazujte rezultate utrka u stvarnom vremenu tijekom vaših događaja. Uključuje live chat za gledatelje i automatski se prebacuje između "Live Results" i "Final Results" ovisno o vremenu događaja.

Saznajte više o Live Results widgetu

Početak rada

1. Pronađite svoj organizer ID ili event ID-ove (pogledajte Kako dobiti svoje ID-e)
2. Odaberite koji widget vam treba
3. Kopirajte kod za ugradnju i zalijepite ga na svoju web-stranicu
4. Prilagodite pomoću neobaveznih konfiguracijskih atributa

Zahtjevi

Widgeti rade na svakoj web-stranici koja podržava JavaScript. To uključuje WordPress, Squarespace, Wix, vlastite HTML stranice i većinu alata za izradu web-stranica. Trebat će vam mogućnost dodavanja prilagođenog HTML-a ili script tagova na vaše stranice.

Za konfiguraciju widgeta trebat će vam vaš ID organizatora i po potrebi određeni ID-ovi događaja. Evo kako ih pronaći.

Pronalaženje vašeg ID-a organizatora

Vaš ID organizatora pojavljuje se u URL-u kada gledate svoju stranicu organizatora na SidewaysData.

1. Idite na sidewaysdata.com
2. Idite na svoju stranicu organizatora
3. Pogledajte URL — bit će u formatu: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Na primjer, ako je vaš URL sidewaysdata.com/organizer/example-motorsports, vaš ID organizatora je example-motorsports.

Pronalaženje ID-ova događaja

ID-ovi događaja pojavljuju se u URL-ovima događaja i na nadzornoj ploči organizatora.

Iz URL-a događaja

1. Idite na bilo koji od svojih događaja na SidewaysData
2. Pogledajte URL — sadržavat će ID događaja nakon /events/

Na primjer: sidewaysdata.com/events/12345 znači da je ID događaja 12345.

Iz vaše nadzorne ploče

1. Prijavite se na SidewaysData
2. Idite na svoju Stranicu događaja
3. ID događaja je prikazan u popisu događaja ili vidljiv u poveznicama

Korištenje alata preglednika za razvojne programere

Ako imate poteškoća s pronalaženjem ID-ova:

1. Kliknite desnom tipkom miša na svoju stranicu organizatora ili događaja
2. Odaberite "Ispitaj" ili "Ispitaj element"
3. Potražite data-atribute ili URL-ove koji sadrže ID

Trebate pomoć?

Ako ne možete pronaći svoje ID-ove, kontaktirajte SidewaysData podršku i pomoći ćemo vam da ih pronađete.

Widget Find Events prikazuje filtriranu listu događaja na vašoj web-stranici. Posjetitelji mogu pregledavati nadolazeće događaje, filtrirati ih prema raznim kriterijima i kliknuti za registraciju ili pregled detalja na SidewaysData.

Što prikazuje

• Kartice događaja s imenom, datumom, lokacijom i statusom registracije
• Padajući filteri za godinu, vrstu događaja, status registracije i volontere
• Izravne poveznice na stranice događaja na SidewaysData
• Responzivni izgled koji se prilagođava svakoj veličini zaslona

Osnovni kod za ugrađivanje

Dodajte ovaj script tag na vašu web-stranicu na mjesto gdje želite da se događaji pojave:

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

Zamijenite your-organizer-id sa svojim stvarnim organizer ID-jem (pogledajte Dobivanje vaših ID-ova).

Zadano ponašanje

Bez dodatne konfiguracije, widget će:

• Prikazivati sve događaje od navedenih organizatora
• Prikazati padajuće filtere za godinu, vrstu događaja, status registracije i volontere
• Sortirati događaje po datumu (najstariji prvi)
• Uključiti događaje sa svim statusima registracije

Kako radi

Widget stvara responzivni iframe koji učitava sadržaj sa SidewaysData. Iframe automatski prilagođava visinu kako bi odgovarao sadržaju, tako da nema pomicanja unutar samog widgeta. Događaji ostaju sinkronizirani s vašim SidewaysData računom — sve promjene koje napravite automatski se odražavaju.

Sljedeći koraci

• Konfigurirajte widget s opcionalnim atributima
• Pogledajte uobičajene primjere za različite slučajeve upotrebe

Prilagodite Find Events widget koristeći atribute podataka na script tagu. Svi atributi su opcionalni osim specificiranja koje događaje prikazati.

Specificiranje događaja

Morate uključiti barem jedan od sljedećih atributa da biste specificirali koje događaje prikazati:

data-organizer-ids

Prikažite sve događaje od određenih organizatora. Koristite vrijednosti odvojene zarezima za više organizatora.

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

Više organizatora:

<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

Prikažite samo određene događaje prema njihovim ID-ovima. Koristite vrijednosti odvojene zarezima za više događaja.

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

Opcije filtriranja

data-event-status

Filtrirajte događaje prema statusu registracije. Vrijednosti: open, closed ili any.

data-event-status="open"

data-default-reg-status

Postavite zadanu vrijednost za padajući izbornik statusa registracije. Ovo unaprijed odabire opciju filtriranja ali i dalje omogućuje posjetiteljima da je promijene.

data-default-reg-status="open"

data-limit-organizer-event-types

Kada je postavljeno na true, prikazuj samo tipove događaja koje organizator stvarno koristi, umjesto svih dostupnih tipova događaja u padajućem izborniku.

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

data-hide-volunteers-dropdown

Kada je postavljeno na true, sakrij padajući izbornik za filtriranje volonterskih prilika.

data-hide-volunteers-dropdown="true"

Opcije prikaza

data-is-results-mode

Kada je postavljeno na true, prikaži događaje za koje postoje rezultati umjesto nadolazećih događaja. Korisno za stranicu "Prošli rezultati".

data-is-results-mode="true"

data-newest-first

Kada je postavljeno na true, sortiraj događaje s najnovijima prvi umjesto zadane narudžbe od najstarijih prema najnovijima.

data-newest-first="true"

Napredne opcije

data-origin

Koristite prilagođenu domenu umjesto zadane sidewaysdata.com. Potrebno samo ako ste konfigurirali prilagođenu domenu kod SidewaysData.

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

Potpun primjer

Evo primjera koji koristi više konfiguracijskih opcija:

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

Ovo prikazuje događaje s otvorenom registracijom od "example-motorsports", prikazuje samo relevantne tipove događaja u filtru, skriva padajući izbornik za volontere i sortira događaje tako da najnoviji budu prvi.

Uobičajene konfiguracije za Find Events widget za različite slučajeve upotrebe.

Prikaži sve svoje događaje

Prikažite sve događaje iz vaše organizacije sa svim dostupnim opcijama filtriranja:

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

Prikaži samo otvorene prijave

Prikažite događaje koji trenutno prihvaćaju prijave:

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

Prikaži događaje s rezultatima

Napravite stranicu "Prošli rezultati" koja prikazuje događaje koji imaju rezultate mjerenja vremena:

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

Prikaži određene događaje

Prikažite samo određene događaje, kao što je serija prvenstava:

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

Prikaži događaje iz više organizatora

Prikažite događaje iz nekoliko organizacija na regionalnoj ili stranici serije:

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

Pojednostavljeni prikaz (minimalni filteri)

Prikažite događaje s čišćim sučeljem skrivajući manje korištene filtre:

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

Widget za početnu stranicu (otvoreni događaji, najnoviji prvi)

Uobičajena konfiguracija za početnu stranicu vaše web-stranice:

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

Zadano na filter otvorenih prijava

Prikažite sve događaje, ali postavite filter prijava da bude zadano 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>

Ovo se razlikuje od data-event-status="open" jer posjetitelji i dalje mogu promijeniti filter da vide zatvorene događaje.

The Live Results widget prikazuje rezultate natjecanja u stvarnom vremenu na vašoj web-stranici. Gledatelji mogu pratiti tijekom događaja i pregledavati konačne rezultate nakon njih — sve bez napuštanja vaše stranice.

Što prikazuje

• Rezultati mjerenja vremena u stvarnom vremenu tijekom događaja uživo
• Pokazatelj "Rezultati uživo" ili "Konačni rezultati" ovisno o vremenu događaja
• Ugrađeni live chat pokretan od strane FastComments za interakciju gledatelja
• Automatska ažuriranja kako se bilježe nova vremena

Osnovni kod za ugrađivanje

Dodajte ovaj tag skripte na svoju web-stranicu tamo gdje želite da se rezultati pojave:

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

Zamijenite your-organizer-id svojim stvarnim organizer ID-jem (vidi Dobivanje vaših ID-ova).

Napomena: Widget Live Results zahtijeva atribut data-organizer-id. Widget se neće učitati bez njega.

Kako to radi

Widget stvara prilagodljiv iframe koji se povezuje sa SidewaysData-ovim sustavom za mjerenje vremena uživo. Tijekom aktivnog događaja:

• Rezultati se ažuriraju u stvarnom vremenu kako se bilježe vremena
• Widget prikazuje "Rezultati uživo" kako bi naznačio da je mjerenje u tijeku
• Live chat omogućuje gledateljima raspravu o događaju

Nakon završetka događaja:

• Rezultati ostaju dostupni za pregled
• Widget se prebacuje na pokazatelj "Konačni rezultati"
• Povijest chata se čuva

Primjeri upotrebe

• Dan događaja - Ugradite na svoju početnu stranicu kako bi gledatelji mogli pratiti uživo
• Posvećena stranica s rezultatima - Kreirajte trajnu stranicu s rezultatima na svojoj web-stranici
• Odredišna stranica za društvene mreže - Podijelite poveznicu na svoju stranicu s rezultatima tijekom događaja

Sljedeći koraci

• Konfigurirajte widget s opcionalnim atributima

Widget Live Results ima minimalnu konfiguraciju—potreban je samo vaš ID organizatora.

Obavezni atribut

data-organizer-id

Vaš ID organizatora na SidewaysData. Ovo je obavezno za funkcioniranje widgeta.

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

Pogledajte Pronalaženje vaših ID-eva za pomoć pri pronalaženju vašeg ID-a organizatora.

Neobavezni atribut

data-origin

Koristite prilagođenu domenu umjesto zadane sidewaysdata.com. Potrebno je samo ako imate prilagođenu domenu konfiguriranu sa 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>

Potpun primjer

Tipičan Live Results embed:

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

Rukovanje pogreškama

Ako nedostaje atribut data-organizer-id, widget će zapisati pogrešku u konzolu preglednika i neće se prikazati. Provjerite da ste uključili ovaj obavezni atribut.

Savjeti za postavljanje

• Smjestite widget u kontejner s adekvatnom širinom (preporučeno najmanje 320px)
• Widget automatski prilagođava svoju visinu tako da odgovara sadržaju
• Razmislite o postavljanju iznad pregiba na danima događaja radi maksimalne vidljivosti
• Dobar je kao glavni sadržaj posvećene stranice "Live Results"

SidewaysData widgeti su ugrađeni kao iframe, što ograničava izravno CSS stiliziranje. Međutim, možete kontrolirati kako se widgeti uklapaju u izgled vaše stranice.

Stiliziranje kontejnera

Smjestite widget u element kontejnera kako biste kontrolirali njegov položaj i maksimalnu širinu:

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

Widgeti se automatski šire na 100% širine svog kontejnera. Kontrolirajte širinu stiliziranjem roditeljskog elementa:

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

Ponašanje visine

Visina widgeta prilagođava se automatski prema sadržaju. Iframe koristi postMessage za prijenos potrebne visine na vašu stranicu, čime se uklanjaju klizači unutar widgeta.

Responzivni dizajn

Widgeti su dizajnirani da budu responzivni i dobro funkcioniraju na mobilnim uređajima. Automatski se prilagođavaju užim zaslonima. Za najbolje rezultate:

• Koristite postotne ili fleksibilne širine kontejnera
• Izbjegavajte postavljanje fiksnih širina u pikselima koje mogu uzrokovati vodoravno pomicanje na mobilnim uređajima
• Testirajte na različitim veličinama zaslona

Kompatibilnost pozadine

Widgeti imaju svijetlu pozadinu i dizajnirani su da dobro izgledaju na stranicama svijetle boje. Ako vaša stranica ima tamnu pozadinu, razmislite o postavljanju widgeta u spremnik svijetle boje:

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

Ograničenja stiliziranja unutar iframea

Budući da widgeti koriste iframe, ne možete izravno stilizirati sadržaj unutar njih (npr. fontove, boje ili stilove gumba). Sadržaj widgeta koristi standardno stiliziranje SidewaysData-a kako bi osigurao dosljedan, profesionalan izgled.

Ako imate specifične zahtjeve za brendiranje, kontaktirajte podršku SidewaysData kako biste razgovarali o opcijama.

Dodavanje margina i razmaka

Dodajte razmak oko widgeta koristeći standardni CSS na kontejneru:

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

Uobičajeni problemi i rješenja pri korištenju SidewaysData widgeta.

Widget se ne pojavljuje

Provjerite URL skripte

Provjerite da src atribut skripte upućuje na ispravnu URL adresu:

• 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

Provjerite obavezne atribute

• Find Events widget zahtijeva ili data-organizer-ids ili data-event-ids
• Live Results widget zahtijeva data-organizer-id

Provjerite ima li JavaScript pogrešaka

Otvorite konzolu preglednika za razvojne programere (obično F12 ili desni klik → Inspect → Console) i potražite poruke o pogreškama. Live Results widget zapisuje pogrešku ako nedostaje data-organizer-id.

Provjerite jesu li vaši ID-ovi ispravni

Dvaput provjerite da organizer i event ID-ovi odgovaraju onome što je prikazano na SidewaysData. Pogledajte Getting Your IDs.

Prikazuju se pogrešni događaji

Provjerite pravopis organizer ID-a

Organizer ID-ovi razlikuju velika i mala slova. Provjerite da ID točno odgovara onome što se pojavljuje u SidewaysData URL-u.

Provjerite postavke filtera

Ako koristite data-event-status="open" ali ne vidite događaje, možda nemate nijedan događaj s otvorenom registracijom. Pokušajte ukloniti ovaj filter da vidite sve događaje.

Provjerite način rezultata

Ako je postavljeno data-is-results-mode="true", widget prikazuje događaje s rezultatima, a ne nadolazeće događaje. Uklonite ovaj atribut da biste vidjeli nadolazeće događaje.

Problemi s visinom widgeta

Widget izgleda odsječeno

Widget bi trebao automatski prilagoditi svoju visinu. Ako sadržaj izgleda odsječeno:

1. Provjerite da nijedan roditeljski element nema postavljeno overflow: hidden
2. Osigurajte da nijedan CSS ne postavlja fiksnu visinu na iframe
3. Provjerite je li JavaScript omogućen u vašem pregledniku

Previše praznog prostora

Ako postoji previše praznog prostora ispod widgeta, automatsko prilagođavanje visine to bi trebalo riješiti. Ako ne, widget se možda učitava, ali nema događaja za prikaz.

Sadržaj se ne ažurira

Događaji ne prikazuju najnovije promjene

Widgeti učitavaju svježi sadržaj sa SidewaysData pri svakom učitavanju stranice. Ako se promjene ne pojavljuju:

1. Prisilno osvježite stranicu (Ctrl+F5 ili Cmd+Shift+R)
2. Očistite cache preglednika
3. Pričekajte nekoliko minuta—neke promjene mogu trebati trenutak da se propagiraju

Live rezultati se ne ažuriraju

Tijekom live timinga, rezultati bi se trebali automatski ažurirati. Ako se ne ažuriraju:

1. Provjerite da se događaj aktivno mjeri na SidewaysData
2. Osvježite stranicu
3. Provjerite internetsku vezu

Problemi s graditeljima web-stranica

WordPress

Ako koristite WordPress, možda ćete morati:

• Koristiti "Custom HTML" blok ili widget
• Privremeno onemogućiti bilo koje pluginove koji blokiraju skripte
• Provjeriti uklanja li vaša tema script tagove iz sadržaja

Squarespace

Koristite "Code Block" ili "Embed" element i zalijepite script tag direktno.

Wix

Koristite "HTML iframe" ili značajku "Custom Element" za dodavanje skripte.

Problemi s Cross-Origin

Widgeti učitavaju sadržaj s SidewaysData servera. Ako vidite cross-origin pogreške:

1. Provjerite da koristite https:// (ne http://) za URL skripte
2. Ako koristite data-origin, provjerite je li domena ispravno konfigurirana

Još uvijek imate problema?

Ako ste isprobali ova rješenja i widget i dalje ne radi ispravno, kontaktirajte podršku SidewaysData s:

• URL-om stranice na kojoj ugrađujete widget
• Potpunim script tagom koji koristite
• Bilo kojim porukama o pogreškama iz konzole preglednika
• Opisom što očekujete naspram onoga što se događa