Как подключить виджет заказа музыки

Виджет заказа музыки подключается через CDN и script с типом module. На текущий момент это единственный поддерживаемый способ интеграции (npm-модуль пока не используется для прод-подключения).

1) Включите Стол заказов в настройках стрима

Перед подключением на сайт откройте страницу настроек нужного стрима в панели Tunio и включите «Стол заказов».

Режимы работы:

«Все жанры»: слушатели могут заказывать треки из полного каталога (все категории).
«Жанры эфира»: слушатели могут заказывать только жанры, которые сейчас используются в текущем плейлисте эфира.
«Выключен»: виджет заказов фактически отключён.

На странице настроек стрима скопируйте UUID стрима (ID) из верхней части страницы. Этот UUID обязателен для инициализации виджета.

2) Учитывайте ограничения заказов

Трек не попадёт в эфир, если он уже звучал в течение последнего часа.
Для одного IP-адреса действует лимит: не чаще одного заказа в 30 минут.

3) Подключите виджет на сайт

Подключите стили виджета

HTML

<link rel="stylesheet" href="https://cdn.tunio.ai/build/track-requests/v1.0.0/style.css" />

Подключите скрипт виджета как module

HTML

<script type="module" src="https://cdn.tunio.ai/build/track-requests/v1.0.0/music-request-widget.js"></script>

Вызовите инициализацию после загрузки скрипта

window.TunioMusicRequestWidget.init({
  streamUuid: "uuid-вашего-стрима",
  queueTargetId: "music-order-queue",
  buttonTargetId: "music-order-button",
  lang: "ru",
  theme: "dark"
})

Параметры `init`

streamUuid: string — UUID стрима (обязательный параметр).
queueTargetId?: string — ID контейнера очереди заказов.
buttonTargetId?: string — ID контейнера кнопки открытия виджета.
lang?: "ru" | "en" — язык интерфейса виджета. По умолчанию: en.
theme?: "dark" | "light" — базовая тема. По умолчанию: dark.
showQueue?: boolean — показывать блок очереди. По умолчанию: true.
themeVars?: Record<string, string> — переопределение CSS-переменных для кастомного дизайна.

Требование: укажите как минимум один target (queueTargetId или buttonTargetId).

Кастомизация стилей

Вы можете переопределять стили виджета под дизайн своего сайта через themeVars и/или собственные CSS-правила поверх классов виджета.

Рекомендуется фиксировать версию CDN (например, v1.0.0) в продакшене и обновлять её осознанно после тестирования.