Razširite svoj doseg z vdelavo SidewaysData widgetov neposredno na svoje spletno mesto. Prikažite svoje dogodke in rezultate v živo tam, kjer vaša publika že obiskuje — z eno samo vrstico kode.

Zakaj uporabljati widgete?

• Ena vrstica kode - Preprosto prilepite skriptni tag na svoje spletno mesto
• Vedno posodobljeno - Dogodki in rezultati se samodejno sinhronizirajo iz SidewaysData
• Brez vzdrževanja - Posodobitve in izboljšave opravljamo mi
• Profesionalen videz - Dovršen, odziven dizajn, ki deluje na vseh napravah
• Brezplačno - Vključeno v SidewaysData brez dodatnih stroškov

Razpoložljivi widgeti

Find Events Widget

Prikaže seznam vaših dogodkov, ki ga je mogoče filtrirati. Obiskovalci lahko brskajo po letu, stanju prijave, vrsti dogodka in še več. Idealno za stran z dogodki ali domačo stran.

Več o Find Events widgetu

Live Results Widget

Prikaže rezultate dirk v realnem času med vašimi dogodki. Vključuje klepet v živo za gledalce in se samodejno preklopi med "Live Results" in "Final Results" glede na čas dogodka.

Več o Live Results widgetu

Začnite

1. Poiščite svoj organizer ID ali event IDs (glej Pridobite svoje ID-je)
2. Izberite, kateri widget potrebujete
3. Kopirajte vdelavno kodo in jo prilepite na svoje spletno mesto
4. Prilagodite z neobveznimi atributi konfiguracije

Zahteve

Widgeti delujejo na katerem koli spletnem mestu, ki podpira JavaScript. To vključuje WordPress, Squarespace, Wix, lastne HTML strani in večino graditeljev spletnih strani. Potrebovali boste možnost dodajanja lastnega HTML ali skriptnih oznak na svoje strani.

Za konfiguracijo vtičnikov boste potrebovali svoj ID organizatorja in po želji ID-je določenih dogodkov. Tukaj je, kako jih najdete.

Iskanje ID-ja organizatorja

Vaš ID organizatorja se prikaže v URL-ju, ko si ogledate stran organizatorja na SidewaysData.

1. Pojdite na sidewaysdata.com
2. Pojdite na stran svojega organizatorja
3. Oglejte si URL—boste ga videli v obliki: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Na primer, če je vaš URL sidewaysdata.com/organizer/example-motorsports, je vaš ID organizatorja example-motorsports.

Iskanje ID-jev dogodkov

ID-ji dogodkov se pojavijo v URL-jih dogodkov in na vaši nadzorni plošči organizatorja.

Iz URL-ja dogodka

1. Pojdite na katerikoli svoj dogodek na SidewaysData
2. Oglejte si URL—vsebuje ID dogodka za /events/

Na primer: sidewaysdata.com/events/12345 pomeni, da je ID dogodka 12345.

Iz vaše nadzorne plošče

1. Prijavite se v SidewaysData
2. Pojdite na svojo stran dogodkov
3. ID dogodka je prikazan v seznamu dogodkov ali je viden v povezavah

Uporaba orodij razvijalca brskalnika

1. Na strani organizatorja ali dogodka kliknite z desnim gumbom miške
2. Izberite "Inspect" ali "Inspect Element"
3. Poiščite podatkovne atribute ali URL-je, ki vsebujejo ID

Potrebujete pomoč?

Če ne najdete svojih ID-jev, kontaktirajte podporo SidewaysData in vam bomo pomagali, da jih najdete.

Pripomoček Find Events prikazuje seznam dogodkov na vašem spletnem mestu z možnostjo filtriranja. Obiskovalci lahko brskajo po prihajajočih dogodkih, filtrirajo glede na različna merila in kliknejo za registracijo ali ogled podrobnosti na SidewaysData.

Kaj prikazuje

• Kartice dogodkov z imenom, datumom, lokacijo in statusom registracije
• Spustni filtri za leto, vrsto dogodka, status registracije in priložnosti za prostovoljstvo
• Neposredne povezave na strani dogodkov na SidewaysData
• Odzivna postavitev, ki se prilagodi vsaki velikosti zaslona

Osnovna koda za vdelavo

Dodajte ta script tag na vaše spletno mesto tam, kjer želite, da se prikažejo dogodki:

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

Zamenjajte your-organizer-id z vašim dejanskim ID-jem organizatorja (glejte Pridobivanje vaših ID-jev).

Privzeto vedenje

Brez dodatne konfiguracije bo pripomoček:

• Prikazal vse dogodke iz navedenega organizatorja/organizatorjev
• Prikazal spustne filtre za leto, vrsto dogodka, status registracije in prostovoljce
• Razvrstil dogodke po datumu (najstarejši prvi)
• Vključil dogodke z katerim koli statusom registracije

Kako deluje

Pripomoček ustvari odziven iframe, ki naloži vsebino iz SidewaysData. Iframe samodejno prilagodi svojo višino, da ustreza vsebini, zato znotraj samega pripomočka ni drsnika. Dogodki ostanejo sinhronizirani z vašim računom SidewaysData — vse spremembe, ki jih naredite, se samodejno odrazijo.

Naslednji koraki

• Konfigurirajte pripomoček z neobveznimi atributi
• Oglejte si pogoste primere za različne primere uporabe

Prilagodite gradnik Find Events z atributi podatkov na oznaki skripte. Vsi atributi so neobvezni, razen določanja, katere dogodke prikazati.

Določanje dogodkov

Vključiti morate vsaj enega od teh atributov, da določite, katere dogodke prikazati:

data-organizer-ids

Prikaži vse dogodke določenih organizatorjev. Za več organizatorjev uporabite vrednosti, ločene z vejico.

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

Več organizatorjev:

<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ži samo določene dogodke po njihovih ID-jih. Za več dogodkov uporabite vrednosti, ločene z vejico.

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

Možnosti filtriranja

data-event-status

Filtriraj dogodke po statusu prijav. Vrednosti: open, closed, ali any.

data-event-status="open"

data-default-reg-status

Nastavi privzeto vrednost za spustni meni statusa prijav. To predizbere možnost filtra, a obiskovalcem še vedno dovoli, da jo spremenijo.

data-default-reg-status="open"

data-limit-organizer-event-types

Ko je nastavljeno na true, prikaži samo vrste dogodkov, ki jih organizator dejansko uporablja, namesto vseh razpoložljivih vrst dogodkov v spustnem meniju.

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

data-hide-volunteers-dropdown

Ko je nastavljeno na true, skrij spustni meni za filtriranje prostovoljskih priložnosti.

data-hide-volunteers-dropdown="true"

Možnosti prikaza

data-is-results-mode

Ko je nastavljeno na true, prikaži dogodke, za katere so na voljo rezultati, namesto prihajajočih dogodkov. Uporabno za stran "Pretekli rezultati".

data-is-results-mode="true"

data-newest-first

Ko je nastavljeno na true, razvrsti dogodke tako, da so najnovejši prvi, namesto privzetega razvrščanja od najstarejših proti najnovejšim.

data-newest-first="true"

Napredne možnosti

data-origin

Uporabite lastno domeno namesto privzete sidewaysdata.com. Potrebno le, če imate pri SidewaysData konfigurirano lastno domeno.

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

Celoten primer

Tukaj je primer z več konfiguracijskimi možnostmi:

<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 prikaže dogodke z odprtimi prijavami iz "example-motorsports", v filteru prikaže samo ustrezne vrste dogodkov, skrije spustni meni za prostovoljce in razvrsti dogodke tako, da so najnovejši prvi.

Pogoste konfiguracije za pripomoček Find Events, prilagojene različnim primerom uporabe.

Show All Your Events

Prikaži vse dogodke vaše organizacije z vsemi razpoložljivimi možnostmi filtriranja:

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

Show Only Open Registration

Prikaži dogodke, ki trenutno sprejemajo 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>

Show Events with Results

Ustvari stran "Past Results", ki prikazuje dogodke, ki imajo časovne rezultate:

<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

Prikaži samo določene dogodke, na primer serijo prvenstev:

<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

Prikaži dogodke več organizatorjev na regionalni strani ali strani serije:

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

Prikaži dogodke z bolj čistim vmesnikom s skrivanjem manj uporabljenih filtrov:

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

Pogosta konfiguracija za domačo stran vaše spletne strani:

<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

Prikaži vse dogodke, vendar naj bo filter prijav privzeto nastavljen 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.

Pripomoček Rezultati v živo prikazuje rezultate dirk v realnem času na vaši spletni strani. Gledalci lahko spremljajo dogajanje med dogodki in si po koncu ogledajo končne rezultate — vse brez zapuščanja vaše strani.

Kaj prikazuje

• Rezultati v realnem času med dogodki
• Indikator "Rezultati v živo" ali "Končni rezultati" glede na čas dogodka
• Vgrajen klepet v živo, ki ga poganja FastComments, za interakcijo gledalcev
• Samodejne posodobitve, ko se zabeležijo novi časi

Osnovna koda za vdelavo

Dodajte ta element script na vaše spletno mesto tja, kjer želite, da se prikažejo rezultati:

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

Zamenjajte your-organizer-id z vašim dejanskim ID organizatorja (glejte Pridobitev vaših ID-jev).

Opomba: Pripomoček Rezultati v živo zahteva atribut data-organizer-id. Pripomoček se brez njega ne bo naložil.

Kako deluje

Pripomoček ustvari odziven iframe, ki se poveže s sistemom SidewaysData za meritve v živo. Med aktivnim dogodkom:

• Rezultati se posodabljajo v realnem času, ko se zabeležijo časi
• Pripomoček prikazuje "Rezultati v živo", da označi, da merjenje časa poteka
• Klepet v živo omogoča gledalcem razpravo o dogodku

Po končanem dogodku:

• Rezultati ostanejo na voljo za ogled
• Pripomoček preklopi na indikator "Končni rezultati"
• Zgodovina klepeta se ohrani

Uporabni primeri

• Dan dogodka - Vdelajte na svojo domačo stran, da lahko gledalci spremljajo v živo
• Posamezna stran z rezultati - Ustvarite stalno stran z rezultati na svojem spletnem mestu
• Vstopna stran za družbena omrežja - Delite povezavo do vaše strani z rezultati med dogodki

Naslednji koraki

• Konfigurirajte pripomoček z neobveznimi atributi

The Live Results widget ima minimalno konfiguracijo—zahtevan je le vaš ID organizatorja.

Zahtevan atribut

data-organizer-id

Vaš ID organizatorja SidewaysData. To je potrebno za delovanje gradnika.

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

Poglejte Pridobivanje vaših ID-jev za pomoč pri iskanju vašega ID organizatorja.

Izbirni atribut

data-origin

Uporabite lastno domeno namesto privzete sidewaysdata.com. Potrebno le, če imate s SidewaysData nastavljeno lastno domeno.

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

Celoten primer

Tipična vdelava gradnika Live Results:

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

Ravnanje z napakami

Če atribut data-organizer-id manjka, bo gradnik zabeležil napako v konzoli brskalnika in se ne bo prikazal. Prepričajte se, da je ta zahtevan atribut vključen.

Nasveti za postavitev

• Postavite gradnik v vsebnik z ustrezno širino (priporočeno vsaj 320px)
• Gradnik samodejno prilagodi višino vsebini
• Razmislite o postavitvi v zgornji del strani (above the fold) na dneve dogodkov za največjo vidnost
• Dobro deluje kot glavna vsebina na namenski strani "Live Results"

Widgeti SidewaysData so vdelani kot iframe, kar omejuje neposredno oblikovanje s CSS. Vendar pa lahko nadzorujete, kako se widgeti prilegajo postavitvi vaše strani.

Oblikovanje vsebnika

Ovijte widget v element vsebnika, da nadzorujete njegovo umestitev in največjo širino:

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

Nadzor širine

Widgeti se samodejno raztegnejo na 100% širine svojega vsebnika. Širino nadzorujte z oblikovanjem nadrejenega 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>

Obnašanje višine

Višina widgeta se samodejno prilagodi glede na vsebino. Iframe uporablja postMessage za sporočanje zahtevane višine vaši strani, s čimer se odstranijo drsniki znotraj widgeta.

Prilagodljiv dizajn

Widgeti so zasnovani kot odzivni in dobro delujejo na mobilnih napravah. Samodejno se prilagajajo ožjim zaslonom. Za najboljše rezultate:

• Uporabljajte širine vsebnika, določene v odstotkih, ali prilagodljive širine
• Izogibajte se nastavljanju fiksnih širin v slikovnih pikah, ki lahko povzročijo vodoravno pomikanje na mobilnih napravah
• Preizkusite na različnih velikostih zaslona

Združljivost ozadja

Widgeti imajo svetlo ozadje in so zasnovani tako, da dobro delujejo na svetlih straneh. Če ima vaša stran temno ozadje, razmislite o postavitvi widgeta v vsebnik s svetlo barvo ozadja:

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

Omejitve oblikovanja iframe

Ker widgeti uporabljajo iframe, ne morete neposredno oblikovati vsebine znotraj njih (npr. pisave, barve ali stilov gumbov). Vsebina widgeta uporablja standardno oblikovanje SidewaysData, da zagotovi enoten, profesionalen videz.

Če imate posebne zahteve glede blagovne znamke, kontaktirajte podporo SidewaysData za pogovor o možnostih.

Dodajanje robov in razmikov

Dodajte razmik okoli widgeta s standardnim CSS-om na vsebniku:

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

Pogoste težave in rešitve pri uporabi widgetov SidewaysData.

Widget Not Appearing

Check the script URL

Prepričajte se, da atribut src skripte kaže na pravilni 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

• Find Events widget zahteva bodisi data-organizer-ids ali data-event-ids
• Live Results widget zahteva data-organizer-id

Check for JavaScript errors

Odprite konzolo za razvijalce v brskalniku (običajno F12 ali desni klik → Inspect → Console) in poiščite sporočila o napakah. Live Results widget zabeleži napako, če manjka data-organizer-id.

Verify your IDs are correct

Dvokrožno preverite, da se ID-ji organizatorjev in dogodkov ujemajo s tistim, kar je prikazano na SidewaysData. Oglejte si Pridobivanje vaših ID-jev.

Wrong Events Showing

Check organizer ID spelling

Preverite črkovanje ID-ja organizatorja.

ID-ji organizatorjev ločijo med velikimi in malimi črkami. Prepričajte se, da se ID natančno ujema s tistim, kar je prikazano v URL-ju SidewaysData.

Check filter settings

Če uporabljate data-event-status="open" in ne vidite dogodkov, morda nimate dogodkov z odprto registracijo. Poskusite odstraniti ta filter, da vidite vse dogodke.

Check results mode

Če je nastavljeno data-is-results-mode="true", widget prikazuje dogodke z rezultati, ne prihajajočih dogodkov. Odstranite ta atribut, da vidite prihajajoče dogodke.

Widget Height Issues

Widget appears cut off

Widget bi se moral samodejno prilagoditi višini. Če je vsebina odrezana:

1. Preverite, da noben nadrejeni element nima nastavitve overflow: hidden
2. Prepričajte se, da noben CSS ne nastavlja fiksne višine na iframe
3. Preverite, ali imate v brskalniku omogočen JavaScript

Excessive empty space

Če je pod widgetom preveč praznega prostora, bi to morala rešiti samodejna prilagoditev višine. Če ne, se widget morda naloži, vendar nima dogodkov za prikaz.

Content Not Updating

Events not showing recent changes

Widgeti ob vsakem nalaganju strani naložijo svežo vsebino s SidewaysData. Če se spremembe ne prikazujejo:

1. Trdo osvežite stran (Ctrl+F5 ali Cmd+Shift+R)
2. Počistite predpomnilnik brskalnika
3. Počakajte nekaj minut — nekatere spremembe lahko potrebujejo trenutek, da se uveljavijo

Live results not updating

Med živim merjenjem bi se rezultati morali posodabljati samodejno. Če se ne:

1. Preverite, ali se dogodek na SidewaysData aktivno meri
2. Osvežite stran
3. Preverite vašo internetno povezavo

Website Builder Issues

WordPress

Če uporabljate WordPress, boste morda morali:

• Uporabiti blok ali vtičnik "Custom HTML"
• Začasno onemogočiti morebitne vtičnike, ki blokirajo skripte
• Preveriti, ali vaša tema odstranjuje oznake <script> iz vsebine

Squarespace

Uporabite element "Code Block" ali "Embed" in prilepite oznako <script> neposredno.

Wix

Uporabite funkcijo "HTML iframe" ali "Custom Element" za dodajanje skripte.

Cross-Origin Issues

Widgeti nalagajo vsebino z strežnikov SidewaysData. Če vidite napake s prečnim izvorom:

1. Prepričajte se, da za URL skripte uporabljate https:// (ne http://)
2. Če uporabljate data-origin, preverite, ali je domena pravilno konfigurirana

Still Having Issues?

Če ste poskusili te rešitve in widget še vedno ne deluje pravilno, kontaktirajte podporo SidewaysData z:

• URL-jem strani, kamor vgrajujete widget
• Celotno oznako skripte, ki jo uporabljate
• Vsemi sporočili o napakah iz konzole brskalnika
• Opisom, kaj pričakujete v primerjavi s tem, kar se dogaja