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 без дополнительной оплаты

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

Виджет поиска событий

Отображает фильтруемый список ваших событий. Посетители могут просматривать по году, статусу регистрации, типу события и другим параметрам. Идеально подходит для страницы событий или главной страницы.

Узнайте больше о виджете Find Events

Виджет результатов в реальном времени

Показывает результаты гонки в реальном времени во время ваших мероприятий. Включает живой чат для зрителей и автоматически переключается между "Результаты в реальном времени" и "Итоговые результаты" в зависимости от времени проведения события.

Узнайте больше о виджете Live Results

Начало работы

  1. Найдите ваш organizer ID или ID событий (см. Получение ваших идентификаторов)
  2. Выберите нужный виджет
  3. Скопируйте код вставки и вставьте его на ваш сайт
  4. Настройте с помощью дополнительных атрибутов конфигурации при необходимости

Требования

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

Получение идентификаторов Internal Link

Чтобы настроить виджеты, вам потребуется ваш organizer ID и, при необходимости, конкретные event IDs. Вот как их найти.

Как найти ваш organizer ID

Ваш organizer ID отображается в URL при просмотре страницы организатора на SidewaysData.

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

Например, если ваш URL sidewaysdata.com/organizer/example-motorsports, то ваш organizer ID — example-motorsports.

Как найти event IDs

Event IDs присутствуют в URL событий и в панели управления организатора.

По URL события

  1. Откройте любое из ваших событий на SidewaysData
  2. Посмотрите на URL — он будет содержать event ID после /events/

Например: sidewaysdata.com/events/12345 означает, что event ID — 12345.

Через вашу панель управления

  1. Войдите в SidewaysData
  2. Перейдите на Страница событий
  3. Event ID отображается в списке событий или виден в ссылках

Использование инструментов разработчика браузера

Если у вас возникают трудности с поиском ID:

  1. Щелкните правой кнопкой мыши на странице организатора или события
  2. Выберите «Просмотреть» или «Просмотреть элемент»
  3. Ищите data-атрибуты или URL, содержащие ID

Нужна помощь?

Если вы не можете найти свои ID, свяжитесь со службой поддержки SidewaysData, и мы поможем вам их найти.

Обзор поиска событий Internal Link

Виджет 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 на ваш реальный идентификатор организатора (см. Получение ваших идентификаторов).

Поведение по умолчанию

Без дополнительной настройки виджет будет:

  • Показывать все мероприятия от указанных организаторов
  • Отображать выпадающие фильтры по году, типу мероприятия, статусу регистрации и волонтерским возможностям
  • Сортировать мероприятия по дате (сначала самые старые)
  • Включать мероприятия с любым статусом регистрации

Как это работает

Виджет создаёт адаптивный iframe, который загружает контент с SidewaysData. iframe автоматически подстраивает свою высоту под содержимое, поэтому внутри виджета нет прокрутки. Мероприятия остаются синхронизированными с вашей учетной записью SidewaysData — любые внесённые вами изменения отображаются автоматически.

Дальнейшие шаги

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

Настройте виджет Find Events с помощью атрибутов данных на теге script. Все атрибуты являются необязательными, за исключением указания того, какие события показывать.

Указание событий

Вы должны включить хотя бы один из этих атрибутов, чтобы указать, какие события отображать:

data-organizer-ids

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

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

Несколько организаторов:

<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

Показывать только конкретные события по их идентификаторам. Для нескольких событий используйте значения, разделённые запятыми.

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

Параметры фильтрации

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"

Параметры отображения

data-is-results-mode

Если установлено в true, показывать события, для которых доступны результаты, вместо предстоящих событий. Полезно для страницы «Прошедшие результаты».

data-is-results-mode="true"

data-newest-first

Если установлено в true, сортировать события так, что сначала идут новые, вместо стандартной сортировки от старых к новым.

data-newest-first="true"

Дополнительные параметры

data-origin

Использовать собственный домен вместо домена по умолчанию sidewaysdata.com. Нужно только если у вас настроен собственный домен с SidewaysData.

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

Полный пример

Вот пример с использованием нескольких параметров конфигурации:

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

Показать мероприятия с результатами

Создайте страницу «Прошлые результаты», показывающую мероприятия, в которых есть результаты хронометража:

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

Это отличается от data-event-status="open", поскольку посетители всё ещё могут изменить фильтр, чтобы просмотреть закрытые мероприятия.

Обзор результатов в реальном времени Internal Link

Виджет 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, который подключается к системе live timing от SidewaysData. Во время активного события:

  • Результаты обновляются в реальном времени по мере фиксации времён
  • Виджет отображает «Live Results», чтобы показать, что хронометраж в процессе
  • Живой чат позволяет зрителям обсуждать событие

После окончания события:

  • Результаты остаются доступными для просмотра
  • Виджет переключается на индикатор «Final Results»
  • История чата сохраняется

Сценарии использования

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

Следующие шаги

Конфигурация Internal Link

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

Обов'язковий атрибут

data-organizer-id

Ваш SidewaysData organizer ID. Це обов'язково для роботи віджета.

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

Див. Отримання ваших ID для допомоги у пошуку вашого 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 відсутній, віджет запише помилку в консоль браузера і не відобразиться. Переконайтеся, що цей обов'язковий атрибут вказано.

Поради щодо розміщення

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

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

SidewaysData виджеты встроены как iframes, что ограничивает прямое применение CSS-стилей. Однако вы можете контролировать, как виджеты вписываются в макет вашей страницы.

Container Styling

Обверните виджет в контейнерный элемент, чтобы управлять его расположением и максимальной шириной:

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

Width Control

Виджеты автоматически расширяются до 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>

Height Behavior

Высота виджета автоматически подстраивается под содержимое. iframe использует postMessage для передачи требуемой высоты на вашу страницу, что устраняет появление полос прокрутки внутри виджета.

Responsive Design

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

  • Используйте процентные или гибкие ширины контейнера
  • Избегайте установки фиксированных значений в пикселях, которые могут вызвать горизонтальную прокрутку на мобильных устройствах
  • Тестируйте на разных размерах экранов

Background Compatibility

Виджеты имеют светлый фон и рассчитаны на корректное отображение на светлых страницах. Если на вашем сайте тёмный фон, рассмотрите возможность размещения виджета в контейнере со светлым фоном:

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

Поскольку виджеты используют iframes, вы не можете напрямую стилизовать содержимое внутри них (например, шрифты, цвета или стили кнопок). Содержимое виджета использует стандартные стили SidewaysData, чтобы обеспечить последовательный и профессиональный внешний вид.

Если у вас есть специфические требования брендинга, свяжитесь со службой поддержки SidewaysData для обсуждения возможных вариантов.

Adding Margins and Spacing

Добавьте отступы вокруг виджета с помощью стандартного 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 тега script указывает на правильный 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 или правый клик → Просмотреть → Консоль) и найдите сообщения об ошибках. Виджет Live Results выводит ошибку, если отсутствует data-organizer-id.

Убедитесь, что ваши идентификаторы корректны

Дважды проверьте, что идентификаторы организаторов и событий совпадают с теми, что показаны на SidewaysData. См. Getting Your IDs.

Отображаются неправильные события

Проверьте регистр в идентификаторе организатора

Идентификаторы организаторов чувствительны к регистру. Убедитесь, что идентификатор точно совпадает с тем, что отображается в 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. Подождите несколько минут — некоторые изменения могут занять время, чтобы распространиться

Живые результаты не обновляются

Во время живого хронометража результаты должны обновляться автоматически. Если это не происходит:

  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, который вы используете
  • Любые сообщения об ошибках из консоли браузера
  • Описание того, чего вы ожидаете, и того, что происходит вместо этого