Создавайте собственные оповещения и ленты событий.

Чтобы последние оповещения оставались видимыми в OBS или Streamlabs Desktop, начните с иллюстрированное руководство по наложению событий.

Выберите правильную стартовую страницу

Используйте multi-alerts.html для презентаций предупреждений по времени и events.html или themes/events/index.html для списка текущих событий. У них разное поведение при рендеринге и очереди. Начните с URL-адреса, созданного для инструмента, который вы уже используете.

Выберите стиль ленты активности

Открыть Лента активности/События → Включить и настроить → Стиль ленты, выберите макет, затем скопируйте обновленную ссылку в свой браузер или в OBS исходный код браузера. Открыть Настройте внешний вид ленты для настройки цветов и интервалов. Оставьте поле пустым, чтобы использовать стиль по умолчанию.

Добавьте эти опции к существующим events.html?session=YOUR_SESSION_ID ссылка с &. Сохраните свой сеанс, пароль и параметры подключения.

• accent, pagebg, cardbg, textcolor, и mutedcolor: CSS цвета. Кодирование шестнадцатеричного цвета # как %23 в URL или опустите #.
• fontsize=14: размер текста 10–40 пикселей. padding=8, gap=4, и radius=6: заполнение строк, расстояние между событиями и угловой радиус, каждый из 0–40 пикселей.
• noheader скрывает заголовок страницы; noanimation отключает анимацию входа.
• Сочетайте стили с lightmode, transparent, font, googlefont, scale, notime, и hidemeta. Прозрачный режим переопределяет фон страницы; Фоны карточек остаются настраиваемыми отдельно.

Например, добавьте &style=twitch&accent=%23e5b94f&padding=8&fontsize=14 для более плотного списка занятий с золотым акцентом.

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

В разделе Лента активности/События → Включить и настроить, откройте Выберите, какие события будут появляться или Содержимое и поведение строк. Оставьте элементы управления выключенными и поля пустыми, чтобы сохранить вид по умолчанию. Скопируйте обновленную ссылку после их изменения. Эти элементы управления влияют только на этот канал; обычный чат остается исключенным.

Каждая строка принадлежит к одной категории в зависимости от названия события. Именное членство, подарки и покупки сохраняют свою категорию, даже если в них указана сумма. Советы с hasDonation и ни одно распознанное имя события не принадлежит категории платного сообщения, включая биты DOM Twitch. Значки членства в обычном чате не превращают его в событие членства.

Для более точного управления используйте filterevents=supersticker,watch_streak чтобы скрыть точные названия событий. При сопоставлении игнорируется регистр и используются существующие псевдонимы событий канала; он не ищет текст сообщения. Исключение категорий и точных названий сочетается с существующими фильтрами источников, «только пожертвования», «только для одаренных подписчиков» и «минимального значения». Включение нескольких фильтров может привести к тому, что соответствующие события не останутся. См. справочник событий для полезных данных, специфичных для источника.

• hidemessage, hidecontentimg, hideplatformicons, hideeventlabels и hideamounts скрыть соответствующие элементы строки. Они не отбрасывают событие и не изменяют то, что отправляет функция щелчка. Встроенные смайлы являются частью текста сообщения. Суммы или имена, записанные в тексте сообщения, метаданных или деталях Hype Train не редактируются этими элементами управления.
• nofeature отключает функцию «нажми на ссылку» в этом фиде. Детали метаданных по-прежнему можно открыть.
• hidecategorytag hides only the generic category tag, such as Donation or Event, while keeping the descriptive event label. In the popup, enable Hide category tag в разделе Содержимое и поведение строк.
• eventduration=60 удаляет строку из этого канала через 60 секунд. Пустой или 0 сохраняет существующее поведение хранения; положительные значения находятся в диапазоне от 1 до 86 400 секунд. Обновления Hype Train перезапускают таймер; закончившиеся поезда по-прежнему исчезают максимум через 30 секунд. Удаление не удаляет событие, уже отправленное в избранное наложение.
• hideempty скрывает ожидающее сообщение, когда никаких событий не видно.

Загрузите и сохраните файловую структуру.

1. Загрузите исходный ZIP-файл. и извлеките его. В этих руководствах используется бета-версия; храните файлы из одной загрузки вместе.
2. Копировать multi-alerts.html на my-alerts.html рядом с оригиналом. Если вы выберете другую страницу или тему, сохраните ее копию в исходной папке этого файла.
3. Откройте скопированный HTML и связанный с ним CSS/JS в редакторе или инструменте искусственного интеллекта. Добавьте предоставленные изображения/шрифты в тот же проект и используйте относительные пути. Начните с переопределений CSS; включать рендерер при изменении сгенерированной разметки.

Следующие файлы помогут вам разобраться в конструкции и поведении. Это список для чтения, а не полный пакет зависимостей: сохраните извлеченную папку нетронутой, включая изображения, шрифты, сценарии и любые файлы данных.

Подключите свою копию и откройте ее в OBS.

Запустите SSN и сначала заставьте работать исходный сгенерированный URL-адрес наложения. session= подключается к этому сеансу SSN; это не имя вашего канала или имя этого файла. Поддерживайте SSN, соответствующую функцию, и ее источники данных.

1. Перетащите отредактированный HTML-файл в Chrome или Edge. Скопируйте его адрес из адресной строки; это начинается с file:///.
2. Скопируйте все из ? и далее в рабочей ссылке наложения SSN и добавьте ее в конец адреса этого файла. Сохраните все настройки, включая сеанс, пароль и любые # окончание.
3. Откройте результат в браузере, затем установите источник браузера OBS. URL по тому же адресу, что и Локальный файл снято. Сопоставьте исходные размеры с предполагаемым дизайном.

Для начального файла выше локальный адрес выглядит следующим образом; ваша фактическая ссылка может содержать дополнительные обязательные параметры:

file:///C:/SSN/social_stream-beta/my-alerts.html?session=YOUR_SESSION

Используйте фактический адрес файла на вашем компьютере. OBS сохраняет его вместе с исходником; сохраните загруженную папку там же. После сохранения изменений дизайна обновите исходный код браузера. общее руководство по настройке включает примеры для Mac и дополнительную панель запуска для флажка «Локальный файл».

Где изменить дизайн

Измените рамку оповещения, типографику, размещение значков, оформление прогресса/времени и движение. В Multi-Alerts большая часть макета создана в multi-alerts.js; включите его, когда просите ИИ изменить структуру. Для изолированной ветки скопируйте и этот сценарий и обновите только ссылку на скопированный HTML-скрипт.

Сохранение классификации событий и фильтров. В строке платного чата может использоваться hasDonation без event: "donation"; платформы также имеют определенные названия событий. Используйте справочник событий и руководство по совместимости для выбора образцов. Сохраняйте исходную отображаемую сумму и любое числовое значение в долларах США отдельно.

Скопируйте эту подсказку AI.

Передайте ИИ скопированные исходные файлы и справочные изображения. Замените детали в скобках. Сохраните инструкции по безопасности ввода в командной строке.

Customize my-alerts.html, copied from multi-alerts.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Restyle this [Multi-Alerts / event feed] as [design]. Include the companion JS when changing generated markup. Keep event classification, filters, queues, timing, sound controls, deduplication, and reset behavior. Honor numeric donoValue including zero; display hasDonation in its original unit. Do not collapse distinct event types into a generic donation event.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

Проверьте этот тип наложения.

Сначала используйте предварительную или тестовую настройку. руководство по тестовому сообщению объясняет, как отправлять вымышленные полезные данные через SSN; тест, отправленный в ваш производственный сеанс, может активировать существующие средства автоматизации.

1. Используйте инструмент тестовых сообщений, чтобы отправить конкретное сообщение о подписке, подписке, подарке, рейде или платном сообщении, которое поддерживает ваш источник; проверьте, какие поля действительно присутствуют.
2. Отправьте два оповещения близко друг к другу, чтобы проверить очередь и анимацию выхода. Проверьте пустое сообщение с меткой пожертвования и длинным именем.
3. Для лент событий проверьте прокрутку, фильтрацию и поведение функций при нажатии. Что касается звуковых эффектов, проверьте исходный звук в OBS, а также изображение.

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

Дополнительные материалы: Совместимость с событиями · Эффекты оповещений · Предварительные настройки событий · Справочник событий · Устранение неполадок при локальной настройке.