SidewaysDataSidewaysData
Menu Icon

Мова 🇺🇦 Українська
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Початок роботи

Огляд
Отримання ваших ідентифікаторів

Віджет пошуку подій

Огляд віджета пошуку подій
Параметри конфігурації
Приклади

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

Огляд віджета живих результатів
Налаштування

Персоналізація

Оформлення віджетів
Усунення неполадок

Огляд Internal Link

Розширте свій охоплення, вставивши віджети SidewaysData безпосередньо на свій вебсайт. Відображайте ваші події та живі результати там, де вже буває ваша аудиторія — всього одним рядком коду.

Чому варто використовувати віджети?

  • Один рядок коду - Просто вставте тег script у свій вебсайт
  • Завжди актуально - Події та результати синхронізуються автоматично з SidewaysData
  • Без обслуговування - Ми беремо на себе всі оновлення та покращення
  • Професійний вигляд - Відшліфований, адаптивний дизайн, що працює на будь‑якому пристрої
  • Безкоштовно - Включено в SidewaysData без додаткової оплати

Доступні віджети

Віджет пошуку подій

Відображає перелік ваших подій з можливістю фільтрації. Відвідувачі можуть переглядати за роком, статусом реєстрації, типом події та ін. Ідеально підходить для сторінки подій або головної сторінки.

Дізнатися більше про віджет пошуку подій

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

Показує результати гонок у режимі реального часу під час ваших подій. Містить чат у реальному часі для глядачів і автоматично перемикається між "Живі результати" та "Фінальні результати" залежно від часу події.

Дізнатися більше про віджет живих результатів

Початок роботи

  1. Знайдіть свій organizer ID або event IDs (див. Getting Your IDs)
  2. Виберіть потрібний віджет
  3. Скопіюйте код вбудовування і вставте його на свій вебсайт
  4. Налаштуйте за допомогою необов'язкових атрибутів конфігурації

Вимоги

Віджети працюють на будь‑якому вебсайті, який підтримує JavaScript. Це включає WordPress, Squarespace, Wix, сайти з власним HTML і більшість конструкторів сайтів. Вам потрібно мати можливість додавати власний HTML або теги script на ваші сторінки.

Отримання ваших ідентифікаторів Internal Link

Щоб налаштувати віджети, вам знадобиться ваш ідентифікатор організатора і, за бажанням, конкретні ідентифікатори подій. Ось як їх знайти.

Знаходження вашого ідентифікатора організатора

Ваш ідентифікатор організатора відображається в URL під час перегляду сторінки організатора на SidewaysData.

  1. Перейдіть на sidewaysdata.com
  2. Перейдіть на сторінку вашого організатора
  3. Подивіться на URL — він матиме формат: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

Наприклад, якщо ваш URL sidewaysdata.com/organizer/example-motorsports, ваш ідентифікатор організатора — example-motorsports.

Знаходження ідентифікаторів подій

Ідентифікатори подій відображаються в URL подій та на панелі організатора.

З URL події

  1. Перейдіть до будь-якої вашої події на SidewaysData
  2. Подивіться на URL — він міститиме ідентифікатор події після /events/

Наприклад: sidewaysdata.com/events/12345 означає, що ідентифікатор події — 12345.

З вашої панелі

  1. Увійдіть у SidewaysData
  2. Перейдіть на вашу Сторінку «Події»
  3. Ідентифікатор події відображається в списку подій або видно в посиланнях

Використання інструментів розробника браузера

Якщо у вас виникають проблеми з пошуком ідентифікаторів:

  1. Клацніть правою кнопкою миші на сторінці організатора або події
  2. Виберіть «Перевірити» або «Перевірити елемент»
  3. Шукайте data-атрибути або URL, що містять ідентифікатор

Потрібна допомога?

Якщо ви не можете знайти свої ідентифікатори, зв’яжіться з підтримкою SidewaysData і ми допоможемо вам їх знайти.

Огляд віджета пошуку подій Internal Link

Віджет Find Events відображає фільтрований список подій на вашому сайті. Відвідувачі можуть переглядати майбутні події, фільтрувати за різними критеріями та переходити для реєстрації або перегляду деталей на SidewaysData.

What It Displays

  • Картки подій із назвою, датою, місцем і статусом реєстрації
  • Випадаючі меню фільтрів для року, типу події, статусу реєстрації та волонтерських можливостей
  • Прямі посилання на сторінки подій на SidewaysData
  • Адаптивний макет, який підлаштовується під будь-який розмір екрана

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 (див. Отримання ваших ID).

Default Behavior

Without additional configuration, the widget will:

  • Показувати всі події від вказаного(их) організатора(ів)
  • Показувати випадаючі фільтри для року, типу події, статусу реєстрації та волонтерів
  • Сортувати події за датою (спочатку найстаріші)
  • Включати події з будь-яким статусом реєстрації

How It Works

The widget creates a responsive iframe that loads content from SidewaysData. The iframe automatically adjusts its height to fit the content, so there's no scrolling within the widget itself. Events stay synchronized with your SidewaysData account—any changes you make are reflected automatically.

Next Steps

Параметри конфігурації Internal Link

Налаштуйте віджет Find Events за допомогою атрибутів data на тегу script. Всі атрибути необов'язкові, окрім вказання того, які події показувати.

Specifying Events

Ви повинні вказати принаймні один з цих атрибутів, щоб визначити, які події відображати:

data-organizer-ids

Показувати всі події від конкретних організаторів. Для кількох організаторів використовуйте значення, розділені комами.

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

Multiple organizers:

<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

Показувати лише конкретні події за їхніми ID. Для кількох подій використовуйте значення, розділені комами.

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

Filtering Options

data-event-status

Фільтруйте події за статусом реєстрації. Значення: open, closed, або any.

data-event-status="open"

data-default-reg-status

Задає значення за замовчуванням для випадаючого списку статусу реєстрації. Це попередньо вибирає опцію фільтра, але все одно дозволяє відвідувачам змінювати її.

data-default-reg-status="open"

data-limit-organizer-event-types

Якщо встановлено в true, показувати лише ті типи подій, які організатор фактично використовує, а не всі доступні типи подій у випадаючому списку.

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

data-hide-volunteers-dropdown

Якщо встановлено в true, сховати випадаючий список фільтра можливостей волонтерства.

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

Якщо встановлено в true, показувати події, для яких доступні результати, замість майбутніх подій. Корисно для сторінки «Результати минулих подій».

data-is-results-mode="true"

data-newest-first

Якщо встановлено в true, сортувати події, показуючи найновіші першими замість стандартного порядку від найстаріших.

data-newest-first="true"

Advanced Options

data-origin

Використовуйте власний домен замість стандартного sidewaysdata.com. Потрібно лише якщо ви налаштували власний домен у SidewaysData.

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

Complete Example

Ось приклад із використанням кількох опцій конфігурації:

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

Це відображає події з відкритою реєстрацією від "example-motorsports", показує лише релевантні типи подій у фільтрі, ховає випадаючий список волонтерів і сортує події від найновіших.

Приклади Internal Link

Типові конфігурації віджета Find Events для різних сценаріїв використання.

Показати всі ваші події

Показати всі події вашої організації з усіма доступними параметрами фільтра:

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

Показати події з результатами

Створіть сторінку "Past Results", яка відображає події з результатами хронометражу:

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

Встановити за замовчуванням фільтр відкритої реєстрації

Показувати всі події, але зробити фільтр реєстрації за замовчуванням "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.

Огляд віджета живих результатів Internal Link

Віджет Live 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 на ваш фактичний ідентифікатор організатора (див. Getting Your IDs).

Примітка: Віджет Live Results вимагає наявності атрибута data-organizer-id. Віджет не завантажиться без нього.

Як це працює

Віджет створює адаптивний iframe, який підключається до системи хронометражу SidewaysData в реальному часі. Під час активної події:

  • Результати оновлюються в реальному часі в міру фіксації часів
  • Віджет показує «Живі результати», щоб вказати, що хронометраж триває
  • Живий чат дозволяє глядачам обговорювати подію

Після завершення події:

  • Результати залишаються доступними для перегляду
  • Віджет переключається на індикатор «Остаточні результати»
  • Історія чату зберігається

Варіанти використання

  • День заходу - Вставте на головну сторінку, щоб глядачі могли стежити за подією в режимі реального часу
  • Окрема сторінка з результатами - Створіть постійну сторінку з результатами на вашому сайті
  • Цільова сторінка для соціальних мереж - Поділіться посиланням на сторінку з результатами під час подій

Наступні кроки

Налаштування Internal Link

Віджет Live Results має мінімальні налаштування — потрібен лише ваш ідентифікатор організатора.

Required Attribute

data-organizer-id

Ваш ідентифікатор організатора у SidewaysData. Це обов'язково для роботи віджета.

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

Див. Отримання ідентифікаторів для допомоги у пошуку вашого ідентифікатора організатора.

Optional Attribute

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>

Complete Example

Типовий приклад вбудовування Live Results:

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

Error Handling

Якщо атрибут data-organizer-id відсутній, віджет запише помилку в консоль браузера і не відобразиться. Переконайтеся, що ви вказали цей обов'язковий атрибут.

Placement Tips

  • Розміщуйте віджет у контейнері з достатньою шириною (рекомендується щонайменше 320px)
  • Віджет автоматично підлаштовує висоту під вміст
  • Розгляньте розміщення на першому екрані в дні заходу для максимальної видимості
  • Підходить як основний вміст окремої сторінки "Live Results"

Оформлення віджетів Internal Link

Віджети 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>

Поведінка висоти

Висота віджету автоматично підлаштовується під вміст. Iframe використовує postMessage для повідомлення необхідної висоти сторінці, що усуває смуги прокрутки всередині віджету.

Адаптивний дизайн

Віджети спроєктовані як адаптивні та добре працюють на мобільних пристроях. Вони автоматично підлаштовуються під вузькі екрани. Для найкращих результатів:

  • Використовуйте відсоткові або гнучкі ширини контейнера
  • Уникайте фіксованих піксельних ширин, які можуть спричиняти горизонтальну прокрутку на мобільних пристроях
  • Тестуйте на різних розмірах екранів

Сумісність з фоном

Віджети мають світлий фон і розраховані на роботу зі світлими сторінками. Якщо на вашому сайті темний фон, розгляньте можливість розміщення віджету в світлому контейнері:

<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, щоб обговорити варіанти.

Додавання відступів та проміжків

Додайте відступи навколо віджету, використовуючи стандартний 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>

Усунення неполадок Internal Link

Поширені проблеми та рішення при використанні віджетів 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 widget вимагає або data-organizer-ids, або data-event-ids
  • Live Results widget вимагає data-organizer-id

Перевірте помилки JavaScript

Відкрийте консоль розробника у браузері (зазвичай F12 або клацніть правою кнопкою миші → Inspect → Console) і перевірте повідомлення про помилки. Віджет Live Results виводить помилку, якщо відсутній data-organizer-id.

Переконайтеся, що ваші ідентифікатори вірні

Двічі перевірте, що ідентифікатори організатора та подій збігаються з тими, що вказані на SidewaysData. Див. Отримання ваших ідентифікаторів.

Показуються невірні події

Перевірте написання ідентифікатора організатора

Ідентифікатори організаторів чутливі до регістру. Переконайтеся, що ID точно збігається з тим, що відображається в URL SidewaysData.

Перевірте налаштування фільтра

Якщо ви використовуєте 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. Зачекайте кілька хвилин — деякі зміни можуть зайняти трохи часу на поширення

Live results не оновлюються

Під час живої фіксації часу результати мають оновлюватися автоматично. Якщо цього не відбувається:

  1. Переконайтеся, що подія активно таймується на SidewaysData
  2. Оновіть сторінку
  3. Перевірте підключення до інтернету

Проблеми з конструкторами сайтів

WordPress

Якщо ви використовуєте WordPress, можливо, вам потрібно:

  • Використати блок або віджет "Custom HTML"
  • Тимчасово вимкнути будь-які плагіни, що блокують скрипти
  • Перевірити, чи ваша тема не видаляє теги script з вмісту

Squarespace

Використайте елемент "Code Block" або "Embed" і вставте тег script безпосередньо.

Wix

Використайте функцію "HTML iframe" або "Custom Element" для додавання скрипта.

Помилки, пов’язані з крос-доменом

Віджети завантажують вміст з серверів SidewaysData. Якщо ви бачите помилки крос-домену:

  1. Переконайтеся, що ви використовуєте https:// (не http://) для URL скрипта
  2. Якщо ви використовуєте data-origin, перевірте, що домен правильно налаштований

Усе ще виникають проблеми?

Якщо ви випробували ці рішення і віджет все одно працює неправильно, зв'яжіться зі службою підтримки SidewaysData і надайте:

  • URL сторінки, де ви вбудовуєте віджет
  • Повний тег script, який ви використовуєте
  • Будь-які повідомлення про помилки з консолі браузера
  • Опис того, що ви очікуєте, і що фактично відбувається