ym
Skip to main content

Виджеты для стрима в OBS: чат, события и донаты

Виджеты для стрима в OBS помогают зрителю видеть чат, новые события, топ донатеров и информацию о музыке прямо поверх трансляции. В StreamsPanel каждый виджет настраивается в браузере, а в OBS добавляется готовой ссылкой через Browser Source.

Чат и события работают в realtime, статические виджеты показывают топ донатеров и бегущую строку, а музыкальные виджеты дополняют очередь заявок из Яндекс Музыки. Для каждого типа можно подготовить отдельный URL и расположить его в своей сцене.

Какие виджеты доступны

Чат Twitch
Сообщения, ответы, бейджи, аватары, Twitch emotes и 7TV с отдельными стилями для ролей.
События стрима
Follow, raid, подписки, подарки, cheer, награды Channel Points и статусы музыкальных заявок.
Топ донатеров
Рейтинг поддержки из DonationAlerts с настройкой количества строк, темы, масштаба и фона.
Бегущая строка
Заголовок и текст для анонса, правил, ссылок или текущей цели с регулируемой скоростью.
Сейчас играет
Название текущего трека из очереди музыкальных заявок StreamsPanel.
Очередь музыки
Следующие заявки зрителей, чтобы порядок воспроизведения был понятен прямо в эфире.

Как добавить виджет в OBS

Шаг 1

Создайте нужный виджет

Откройте раздел виджетов в профиле и выберите чат, события, топ донатеров или бегущую строку.

Шаг 2

Настройте содержимое и стиль

Выберите события, поведение очереди, цвета, фон, масштаб и другие параметры. Результат виден в предпросмотре.

Шаг 3

Опубликуйте версию для OBS

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

Шаг 4

Скопируйте Browser Source URL

У каждого виджета свой URL. Не публикуйте его в чате и не отправляйте посторонним.

Шаг 5

Добавьте источник в OBS

Создайте Browser Source, вставьте URL, задайте размер сцены и оставьте фон прозрачным.

Шаг 6

Проверьте тестовое событие

Запустите preview или тест в редакторе и убедитесь, что текст, звук и расположение подходят вашей сцене.

Виджет чата Twitch

Чат в OBS должен оставаться читаемым даже во время активного эфира. В редакторе StreamsPanel можно настроить не только цвета, но и поведение сообщений: направление, количество строк, срок показа, команды, ответы и список ботов.

Сообщения и ответы
Настройте направление появления, число видимых сообщений, время жизни и показ reply-контекста.
Роли и оформление
Отдельные стили для стримера, бота, модератора, VIP, подписчика и обычного зрителя.
Emotes и аватары
Поддерживаются Twitch fragments, бейджи, аватары, Twitch emotes и 7TV без небезопасного HTML.
Модерация
Удаление сообщения, очистка пользователя и очистка комнаты синхронно убирают контент из виджета.

Виджет событий стрима

События показываются по одному, поэтому несколько алертов не перекрывают друг друга. Для очереди настраиваются длительность, пауза между элементами, максимум и правило переполнения. Общий стиль можно дополнить оформлением для конкретного события.

Активность канала
Новые подписчики, повторные подписки, подарки подписок, follow и raid.
Поддержка и интерактив
Cheer и погашения наград Channel Points с данными реального события.
Музыкальные заявки
Добавление в очередь, начало, завершение, пропуск и ошибка воспроизведения.
Очередь алертов
Настройте длительность, паузу, максимум элементов и поведение при переполнении.

Для событий доступны встроенные звуки. Preview в панели остаётся беззвучным, а в OBS звук появляется после включения audio у Browser Source и настройки микшера.

Черновик и публикация без риска для эфира

У чата и событий есть отдельные черновики. Вы можете спокойно проверить новый дизайн в панели, а затем одной публикацией применить конфигурацию к OBS. Обычная публикация не требует менять URL в сцене.

Черновик отдельно от эфира
Можно менять дизайн и список событий, не затрагивая текущий виджет в OBS.
Публикация без нового URL
После публикации OBS получает новую ревизию конфигурации по прежней ссылке.
Быстрое включение
Переключатель «Сейчас в OBS» меняет live-состояние и не перезаписывает сохранённый черновик.

Настройки Browser Source в OBS

Размер сцены
Используйте 1920×1080 или 1280×720. Контент остаётся в пределах viewport при обоих размерах.
Прозрачный фон
Browser Source отдаёт прозрачную страницу, поэтому виджет можно положить поверх игры или камеры.
Звук событий
Для звуков включите audio у Browser Source и проверьте источник в микшере OBS.

Если на сцене ничего не видно, сначала проверьте, опубликован и включён ли виджет. Неопубликованный, отключённый, удалённый или заменённый URL отвечает 404, чтобы старую ссылку нельзя было продолжать использовать.

Realtime, восстановление и безопасность URL

Восстановление после reconnect
Ограниченный snapshot восстанавливает актуальные сообщения и события без бесконечного повтора старых алертов.
Защищённый URL
Ссылка работает как ключ доступа. Её можно сменить, после чего старый HTTP URL и realtime-канал перестают работать.
Никакой индексации
Страницы виджетов закрыты от поисковых систем, не хранятся в кеше браузера и не должны попадать в публичные ссылки.

Относитесь к OBS URL как к секрету. Для поддержки достаточно передать ID виджета, тип и номер ревизии. Полный URL, OAuth-токены и сообщения чата отправлять не нужно.

FAQ по виджетам для OBS

Как добавить виджет StreamsPanel в OBS?

Создайте виджет в профиле, настройте и опубликуйте его, затем скопируйте OBS URL. В OBS добавьте Browser Source, вставьте ссылку и задайте размер сцены.

Какие события Twitch можно показывать?

Доступны follow, raid, subscribe, resubscribe, подарки подписок, cheer и погашения Channel Points. Виджет также показывает статусы музыкальных заявок StreamsPanel.

Можно ли настроить внешний вид чата отдельно для ролей?

Да. Базовый стиль можно дополнить настройками для стримера, бота, модератора, VIP, подписчика и обычного зрителя.

Нужно ли менять URL после настройки виджета?

Нет. Обычная публикация применяет новую конфигурацию по текущему URL. Менять ссылку нужно только при намеренной ротации, например если она стала известна посторонним.

Почему виджет в OBS показывает 404?

Так происходит, если виджет ещё не опубликован, выключен, удалён или его URL был сменён. Проверьте live-состояние и скопируйте актуальную ссылку из редактора.

Связанные гайды

Заказ музыки на стриме
Как принимать ссылки Яндекс Музыки через Twitch и DonationAlerts, управлять очередью и подключить Player.
Топ донатеров DonationAlerts
Как собрать рейтинг поддержки и дать зрителям отдельную страницу с топом.
Донаты на Twitch через DonationAlerts
Пошаговый старт с DonationAlerts, OBS-алертами и публичной страницей стримера.
Страница донатов стримера
Одна ссылка с донатами, топом, расписанием, вишлистом и другими блоками.

StreamsPanel собирает основные OBS-виджеты в одном редакторе: чат Twitch, события, топ донатеров, бегущую строку и музыку. Настройте каждый слой отдельно, опубликуйте проверенную версию и оставьте сцену OBS стабильной между эфирами.