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

Почему стоит использовать виджеты?

  • One line of code - Просто вставьте тег script на ваш сайт
  • Always up-to-date - События и результаты автоматически синхронизируются из SidewaysData
  • No maintenance - Мы занимаемся всеми обновлениями и улучшениями
  • Professional appearance - Отшлифованный, адаптивный дизайн, который работает на любых устройствах
  • Free - Включено в SidewaysData без дополнительной платы

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

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

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

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

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

Показывает результаты гонки в реальном времени во время ваших событий. Включает живой чат для зрителей и автоматически переключается между «Live Results» и «Final Results» в зависимости от времени события.

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

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

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

Требования

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

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

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

Поиск ID организатора

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

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

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

Поиск ID событий

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

Из URL события

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

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

Из вашей панели управления

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

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

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

  1. Щёлкните правой кнопкой мыши на странице организатора или события
  2. Выберите «Просмотреть код» или «Просмотреть код элемента»
  3. Ищите атрибуты данных или 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 с помощью атрибутов data на теге 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

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

<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 для различных сценариев использования.

Show All Your Events

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

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

Show Only Open Registration

Показывать мероприятия, в которых в данный момент принимаются регистрации:

<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

Создайте страницу "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>

Show Specific Events

Отображать только определённые мероприятия, например серию чемпионатов:

<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

Показывать мероприятия нескольких организаций на региональной странице или странице серии:

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

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

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

Типовая конфигурация для главной страницы вашего сайта:

<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

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

The Live Results widget отображает результаты гонок в реальном времени на вашем сайте. Зрители могут следить за событиями во время их проведения и просматривать итоговые результаты после — всё это, не покидая ваш сайт.

What It Displays

  • Результаты хронометража в реальном времени во время живых событий
  • Индикатор "Live Results" или "Final Results" в зависимости от времени события
  • Встроенный чат в реальном времени на базе FastComments для взаимодействия зрителей
  • Автоматические обновления по мере записи новых результатов

Basic Embed Code

Add this script tag to your website where you want results to appear:

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

Replace your-organizer-id with your actual organizer ID (see Получение ваших идентификаторов).

Note: The Live Results widget requires the data-organizer-id attribute. The widget will not load without it.

How It Works

The widget creates a responsive iframe that connects to SidewaysData's live timing system. During an active event:

  • Results update in real-time as times are recorded
  • The widget shows "Live Results" to indicate timing is in progress
  • Live chat allows spectators to discuss the event

After the event ends:

  • Results remain available for viewing
  • The widget switches to "Final Results" indicator
  • Chat history is preserved

Use Cases

  • Event day - Embed on your homepage so spectators can follow along live
  • Dedicated results page - Create a permanent results page on your website
  • Social media landing page - Share a link to your results page during events

Next Steps

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

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

Обязательный атрибут

data-organizer-id

Ваш идентификатор организатора в SidewaysData. Это требуется для работы виджета.

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

См. Получение ваших идентификаторов для помощи в поиске вашего идентификатора организатора.

Необязательный атрибут

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 виджеты внедряются как 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 требует либо data-organizer-ids, либо data-event-ids
  • Виджет Live Results требует data-organizer-id

Проверьте наличие ошибок JavaScript

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

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

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

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

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

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

  1. Убедитесь, что событие активно таймится на SidewaysData
  2. Обновите страницу
  3. Проверьте ваше интернет-соединение

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

WordPress

Если вы используете WordPress, возможно, вам нужно:

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

Squarespace

Используйте элемент "Code Block" или "Embed" и вставьте тег скрипта напрямую.

Wix

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

Проблемы с кросс-доменом

Виджеты загружают контент с серверов SidewaysData. Если вы видите ошибки кросс-домена:

  1. Убедитесь, что вы используете https:// (не http://) для URL скрипта
  2. Если используете data-origin, проверьте, правильно ли настроен домен

Проблемы остались?

Если вы попробовали эти решения и виджет всё ещё работает некорректно, свяжитесь со службой поддержки SidewaysData и пришлите:

  • URL страницы, на которой вы встраиваете виджет
  • Полный тег скрипта, который вы используете
  • Любые сообщения об ошибках из консоли браузера
  • Описание того, что вы ожидаете, и того, что происходит вместо этого