Создайте свои собственные наложения Social Stream.

Создайте свой оверлей за 5 шагов

1. Выберите оверлей который хотите изменить.
2. Загрузите исходный ZIP-файл., распакуйте и скопируйте HTML-файл оверлея.
3. Измените копию самостоятельно или попросите инструмент ИИ.
4. Откройте копию в OBS с настройками сессии SSN, добавленными к адресу.
5. Проверьте с настоящим триггером оверлея.

Выберите оверлей для изменения

Можно менять цвета, шрифты, компоновку, графику и движение оверлея. Страница HTML-файл — сама страница. Файл URL-адрес OBS указывает на неё и добавляет настройки сессии и отображения.

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

Нужно готовое решение? Попробуйте Галерея оверлеев или Галерея шаблонов. Хотите перенести оформление чата StreamElements или Streamlabs? Следуйте руководство по импорту. У такого экспорта свои шаги настройки.

Загрузите файлы

1. Скачать исходники beta в ZIP. Или откройте бета-репозиторий и выберите Код → Скачать ZIP.
2. Распакуйте в постоянную папку, например C:\SSN\social_stream-beta\. Не редактируйте внутри ZIP. Переустанавливать SSN не нужно.
3. Найдите файл оверлея (см. таблицу выше). Создайте копию рядом с оригиналом, например poll.html → my-poll.html. Для темы вроде themes/featured-styles/featured-modern.html, держите копию в той же папке.
4. Откройте копию в текстовом редакторе или редакторе кода. Сохраните как .html, не .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Сохраните ссылку сессии

Запустите SSN, подключите источник и проверьте исходный оверлей. Затем скопируйте полную ссылку из инструмента SSN для этого оверлея.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Значение после session= — ваша сессия SSN. Это не канал YouTube, имя Twitch, имя файла или название опроса. SSN и страница должны использовать одну сессию и пароль. Оставьте SSN запущенным: оверлеи лишь получают данные, а не захватывают чат сами.

Если копия пуста, сначала проверьте исходную ссылку. Одни страницы запрашивают недостающие настройки, другие скрываются или перенаправляют. Правильная сессия в ссылке избавляет от догадок.

Откройте файл в OBS

Откройте изменённый файл прямо с компьютера. Сервер не нужен.

1. Перетащите копию HTML в Chrome или Edge. Скопируйте адрес. Он начинается с file:///.
2. Из рабочей ссылки оверлея SSN скопируйте всё начиная с ? и далее. Вставьте это в конец адреса файла. Так сохранятся сессия, пароль, настройки и любые # .
3. Откройте полученный адрес в браузере для проверки.
4. В OBS добавьте Источник «Браузер». Оставьте Локальный файл выключенным. Вставьте полный адрес в URL и задайте ширину и высоту.

Пример: эта ссылка SSN…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…становится таким для скачанной копии опроса в Windows:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

В macOS начинается с file:///Users/..., в Linux обычно file:///home/.... Копирование из браузера правильно обрабатывает пробелы и слеши.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS объясняет режимы файла/URL, размеры, пользовательский CSS и обновление в Ссылка на исходный код браузера.

Изменить дизайн самостоятельно или с ИИ

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

Подсказка AI

Используйте промпт для нужного типа из руководства по дизайну или начните с этого. Передайте ИИ копию файла и загружаемые стили и скрипты.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

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 and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Не позволяйте входящему чату становиться кодом

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

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Если на странице уже есть санитайзер, сохраните его. Не добавляйте второй.
• Для файлов в подпапках исправьте пути к скриптам.
• Не вставляйте необработанные имена в строки атрибутов или цвета в разметку стилей. Проверяйте значения стилей перед установкой каждого свойства отдельно.
• Даже очищенный HTML небезопасно выполнять как JavaScript или использовать как инструкцию для ИИ.

Подробнее: Руководство OWASP по безопасным приёмникам данных и очистке HTML.

Проверяйте по одной части

Файлы, которые нужно передать ИИ

Передайте ИИ сам файл оверлея, загружаемые CSS/JS и эти файлы. Одна лишь справка событий не объясняет управление опросом или код компоновки каждого оверлея.

Устранение неполадок

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