Проширите свој досег уграђивањем SidewaysData видџета директно на ваш сајт. Прикажите своје догађаје и резултате уживо тамо где ваша публика већ посећује — уз само један ред кода.

Зашто користити видџете?

• Један ред кода - Једноставно налепите script таг на ваш сајт
• Увек ажурно - Догађаји и резултати се аутоматски синхронизују са SidewaysData
• Без одржавања - Ми се бринемо о свим ажурирањима и побољшањима
• Професионалан изглед - Уређен, прилагодљив дизајн који ради на сваком уређају
• Бесплатно - Укључено у SidewaysData без додатних трошкова

Доступни видџети

Видџет за проналажење догађаја

Прикажите листу ваших догађаја са могућношћу филтрирања. Посетиоци могу претраживати по години, статусу регистрације, типу догађаја и другим критеријима. Савршено за страницу догађаја или почетну страницу.

Сазнајте више о видџету за проналажење догађаја

Видџет уживих резултата

Прикажите резултате трка у реалном времену током ваших догађаја. Укључује уживо ћаскање за гледаоце и аутоматски прекида између "Резултати уживо" и "Коначни резултати" у зависности од времена догађаја.

Сазнајте више о видџету уживих резултата

Почетак рада

1. Пронађите свој идентификатор организатора или идентификаторе догађаја (види Добијање ваших ID-ева)
2. Изаберите који видџет вам је потребан
3. Копирајте код за уграђивање и налепите га на ваш сајт
4. Прилагодите помоћу опционих конфигурационих атрибута

Захтјеви

Видџети раде на сваком сајту који подржава JavaScript. Ово укључује WordPress, Squarespace, Wix, прилагођене HTML странице и већину градитеља сајтова. Требаће вам могућност додавања прилагођеног HTML-а или script тагова на ваше странице.

Za konfiguraciju widgeta trebat će vam vaš ID organizatora i opcionalno konkretni ID-jevi događaja. Evo kako ih pronaći.

Pronalaženje vašeg ID-a organizatora

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

1. Idite на sidewaysdata.com
2. Navigirajte do svoje stranice organizatora
3. Pogledajte URL — bić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-eva događaja

ID-jevi događaja pojavljuju se u URL-ovima događaja i na vašoj nadzornoj ploči.

Iz URL-a događaja

1. Navigirajte do bilo kojeg od vaših 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.

Sa vaše nadzorne ploče

1. Prijavite se na SidewaysData
2. Idite na vašu Stranicu događaja
3. ID događaja je prikazan u listi događaja ili je vidljiv u linkovima

Korištenje alata za razvojne programere u pregledniku

Ako imate problema s pronalaženjem ID-jeva:

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

Trebate pomoć?

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

Видџет Find Events приказује филтрирану листу догађаја на вашем веб-сајту. Посјетиоци могу прегледавати предстојеће догађаје, филтрирати по различитим критеријумима и кликом се регистровати или погледати детаље на SidewaysData.

Шта приказује

• Картице догађаја са именом, датумом, локацијом и статусом регистрације
• Падајући филтери за годину, тип догађаја, статус регистрације и волонтерске могућности
• Директне везе до страница догађаја на SidewaysData
• Респонзивни изглед који се прилагођава свакој величини екрана

Основни код за уграђивање

Додајте овај script таг на ваш сајт тамо гдје желите да се догађаји прикажу:

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

Замијените your-organizer-id вашим стварним ID организатора (види Како добити своје ID-еве).

Подразумјевано понашање

Без додатне конфигурације, видџет ће:

• Приказати све догађаје од наведеног/наведених организатора
• Приказати падајуће филтере за годину, тип догађаја, статус регистрације и волонтерске могућности
• Сортирати догађаје по датуму (најстарији први)
• Укључити догађаје са било којим статусом регистрације

Како функционише

Видџет креира респонзивни iframe који учитава садржај са SidewaysData. Iframe се аутоматски прилагођава висини да би одговарао садржају, тако да нема скроловања унутар самог видџета. Догађаји остају синхронизовани са вашим SidewaysData налогом — све промјене које направите се аутоматски одражавају.

Сљедећи кораци

• Конфигуришите видџет са опционим атрибутима
• Погледајте честе примјере за различите сценарије

Prilagodite Find Events vidžet koristeći data atribute na script tagu. Svi atributi su opcionalni osim onih kojima se navode koji događaji treba da se prikažu.

Navođenje događaja

Morate uključiti bar jedan od ovih atributa da odredite koji događaji će se prikazati:

data-organizer-ids

Prikaže sve događaje od određenih organizatora. Koristite vrijednosti odvojene zarezom 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že samo određene događaje po njihovim ID-jevima. Koristite vrijednosti odvojene zarezom 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 po statusu registracije. Vrijednosti: open, closed, ili any.

data-event-status="open"

data-default-reg-status

Postavite podrazumijevanu vrijednost za padajući meni statusa registracije. Ovo unaprijed bira opciju filtera ali i dalje omogućava posjetiocima 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 zapravo koristi, umjesto svih dostupnih tipova u padajućem meniju.

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

data-hide-volunteers-dropdown

Kada je postavljeno na true, sakrij padajući meni filtera za volonterske prilike.

data-hide-volunteers-dropdown="true"

Opcije prikaza

data-is-results-mode

Kada je postavljeno na true, prikazuj događaje koji imaju dostupne rezultate 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 tako da prvi budu najnoviji umjesto podrazumijevanog sortiranja po najstarijim.

data-newest-first="true"

Napredne opcije

data-origin

Koristite prilagođeni domen umjesto podrazumijevanog sidewaysdata.com. Potrebno samo ako imate prilagođeni domen konfigurisan sa SidewaysData.

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

Kompletan primjer

Evo primjera koji koristi više opcija konfiguracije:

<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 sa otvorenom registracijom iz "example-motorsports", prikazuje samo relevantne tipove događaja u filteru, skriva padajući meni za volontere i sortira događaje tako da su najnoviji prvi.

Уобичајене конфигурације за Find Events widget како би одговарале различитим случајевима употребе.

Прикажи све ваше догађаје

Прикажи све догађаје из ваше организације са свим доступним опцијама филтрирања:

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

Прикажи само догађаје са отвореном регистрацијом

Прикажи догађаје који тренутно примају пријаве:

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

Прикажи догађаје са резултатима

Креирајте страницу „Прошли резултати” која приказује догађаје који имају резултате мерења времена:

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

Прикажи одређене догађаје

Прикажи само одређене догађаје, на пример серију првенстава:

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

Прикажи догађаје из више организатора

Прикажи догађаје из неколико организација на регионалној или страници серије:

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

Поједностављени приказ (минимални филтери)

Прикажи догађаје са чистијим интерфејсом сакривањем мање коришћених филтера:

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

Видџет на почетној страници (отворени догађаји, најновији први)

Уобичајена конфигурација за почетну страницу вашег веб-сајта:

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

Подразумевано на филтер отворене регистрације

Прикажи све догађаје, али постави филтер регистрације да буде подразумевано "отворено":

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

Ово се разликује од data-event-status="open" јер посјетиоци и даље могу промијенити филтер да виде затворене догађаје.

The Live Results видгет приказује резултате трка у реалном времену на вашем сајту. Гледаоци могу пратити ток догађаја и прегледати коначне резултате након тога — све без напуштања ваше странице.

Шта приказује

• Резултати времена у реалном времену током догађаја уживо
• "Live Results" или "Final Results" индикатор у зависности од времена догађаја
• Уграђени чат уживо који покреће FastComments за интеракцију гледалаца
• Аутоматска ажурирања како се бележе нова времена

Основни код за уграђивање

Додајте овај script тег на ваш сајт тамо где желите да се резултати појаве:

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

Замените your-organizer-id са вашим стварним organizer ID-ом (погледајте Како добити своје ID-ове).

Напомена: Live Results видгет захтева data-organizer-id атрибут. Видгет се неће учитати без њега.

Како функционише

Видгет прави респонзивни iframe који се повезује са SidewaysData-иним системом за мерење времена уживо. Током активног догађаја:

• Резултати се ажурирају у реалном времену како се бележе времена
• Видгет приказује "Live Results" да означи да је мерење времена у току
• Уживо чат омогућава гледаоцима да дискутују о догађају

Након завршетка догађаја:

• Резултати остају доступни за преглед
• Видгет се пребацује на индикатор "Final Results"
• Историја чата се чува

Примери употребе

• Дан догађаја - Уградите га на почетну страницу да би гледаоци могли пратити уживо
• Посвећена страница са резултатима - Направите трајну страницу са резултатима на вашем сајту
• Лендинг страница за друштвене мреже - Поделите линк ка страници са резултатима током догађаја

Следећи кораци

• Конфигуришите видгет са опционим атрибутима

Live Results widget има минималну конфигурацију—потребан је само ваш organizer ID.

Потребан атрибут

data-organizer-id

Ваш SidewaysData organizer ID. Ово је обавезно да би widget функционисао.

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

Pogledajte Kako pronaći svoje ID-jeve za помоћ при проналажењу вашег organizer ID.

Опциони атрибут

data-origin

Користите прилагођени домен уместо подразумеваног sidewaysdata.com. Потребно само ако имате прилагођени домен конфигурисан са 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>

Комплетан пример

Типичан пример уградње Live Results-а:

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

Обрада грешака

Ако недостаје атрибут data-organizer-id, widget ће записати грешку у конзолу прегледача и неће се приказати. Уверите се да укључите овај обавезни атрибут.

Савјети за постављање

• Поставите widget у контејнер са довољном ширином (препоручује се најмање 320px)
• Widget аутоматски прилагођава висину да одговара садржају
• Размотрите постављање изнад преклопа на дане догађаја за максималну видљивост
• Добро функционише као главни садржај посвећене странице "Live Results"

SidewaysData видџети су уграђени као iframe-ови, што ограничава директно стилизовање помоћу CSS-а. Међутим, можете контролисати како се видџети уклапају у изглед ваше странице.

Стилизација контејнера

Омотајте видџет у контејнерски елемент да бисте контролисали његово постављање и максималну ширину:

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

Контрола ширине

Видџети се аутоматски проширују на 100% ширине свог контејнера. Контролишите ширину стилизовањем родитељског елемента:

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

Понашање висине

Висина видџета се аутоматски прилагођава на основу садржаја. The iframe uses postMessage to communicate its required height to your page, eliminating scrollbars within the widget.

Респонзивни дизајн

Видџети су дизајнирани да буду респонзивни и да добро функционишу на мобилним уређајима. Аутоматски се прилагођавају ужим екранима. За најбоље резултате:

• Користите ширине контејнера засноване на процентима или флексибилне
• Избегавајте постављање фиксних ширина у пикселима које могу изазвати хоризонтално скроловање на мобилним уређајима
• Тестирајте на разним величинама екрана

Компатибилност позадине

Видџети имају светлу позадину и дизајнирани су да добро функционишу на страницама светлих боја. Ако ваша страница има тамну позадину, размислите о постављању видџета у контејнер светле боје:

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

Ограничења стиловања iframe-а

Пошто видџети користе iframe-ове, не можете директно стилизовати садржај унутар њих (нпр. фонтове, боје или стилове дугмади). Садржај видџета користи стандардну стилску конфигурацију SidewaysData-а како би се осигурао доследан, професионалан изглед.

Ако имате специфичне захтеве за брендирање, контактирајте подршку SidewaysData-а да бисте разговарали о опцијама.

Додавање маргина и размaка

Додајте размак око видџета користећи стандардни CSS на контејнеру:

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

Чести проблеми и решења при коришћењу SidewaysData видгета.

Видгет се не појављује

Проверите URL скрипте

Уверите се да src атрибут скрипте показује на исправан 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

Проверите обавезне атрибуте

• Find Events видгет захтева или data-organizer-ids или data-event-ids
• Live Results видгет захтева data-organizer-id

Проверите JavaScript грешке

Отворите конзолу за развојне програмере у вашем прегледачу (обично F12 или десни клик → Inspect → Console) и потражите поруке о грешкама. Live Results видгет ће пријавити грешку ако data-organizer-id недостаје.

Потврдите да су ваши ID-ови тачни

Проверите да ли се ID-еви организатора и догађаја слажу са онима који су приказани на SidewaysData. Видите Како добити своје ID-еве.

Приказују се погрешни догађаји

Проверите правопис organizer ID-а

Organizer ID-еви су осетљиви на мала и велика слова. Уверите се да ID тачно одговара ономе што се појављује у SidewaysData URL-у.

Проверите подешавања филтера

Ако користите data-event-status="open" али не видите догађаје, можда немате ниједан догађај са отвореном регистрацијом. Покушајте уклонити овај филтер да бисте видели све догађаје.

Проверите режим резултата

Ако је подешено data-is-results-mode="true", видгет приказује догађаје са резултатима, а не предстојеће догађаје. Уклоните овај атрибут да бисте видели предстојеће догађаје.

Проблеми са висином видгета

Видгет изгледа одсјечен

Видгет би требао аутоматски прилагодити своју висину. Ако садржај изгледа одсјечен:

1. Проверите да ниједан родитељски елемент нема подешено overflow: hidden
2. Уверите се да ниједан CSS не поставља фиксну висину на iframe
3. Проверите да ли је JavaScript омогућен у вашем прегледачу

Превише празног простора

Ако има превише празног простора испод видгета, аутоматско прилагођавање висине би требало да то реши. Ако не, видгет можда учитава али нема догађаје за приказ.

Садржај се не освежава

Догађаји не приказују недавно направљене измене

Видгети учитавају свеж садржај са SidewaysData при сваком учитавању странице. Ако се измене не појављују:

1. Тврдо освежите страницу (Ctrl+F5 или Cmd+Shift+R)
2. Обришите кеш вашег прегледача
3. Сачекајте неколико минута — неке измене могу потрајати док се не прошире

Резултати уживо се не ажурирају

Током уживо мерења времена, резултати би требало да се ажурирају аутоматски. Ако се не ажурирају:

1. Проверите да ли се догађај активно мери на SidewaysData
2. Освежите страницу
3. Проверите вашу интернет везу

Проблеми са алатима за прављење сајтова

WordPress

Ако користите WordPress, можда ћете морати:

• Користите "Custom HTML" блок или видгет
• Привремено онемогућити било које додатке који блокирају скрипте
• Проверити да ли ваша тема уклања script тагове из садржаја

Squarespace

Користите "Code Block" или "Embed" елемент и налепите script таг директно.

Wix

Користите "HTML iframe" или "Custom Element" опцију да додате script.

Cross-Origin проблеми

Видгети учитавају садржај са SidewaysData сервера. Ако видите cross-origin грешке:

1. Уверите се да за URL скрипте користите https:// (не http://)
2. Ако користите data-origin, потврдите да је домен правилно конфигурисан

Још увек имате проблема?

Ако сте пробали ова решења и видгет и даље не ради исправно, контактирајте SidewaysData подршку са:

• URL странице на којој уграђујете видгет
• Комплетан script таг који користите
• Било какве поруке о грешкама из конзоле прегледача
• Опис онога што очекујете у односу на оно што се дешава