Створіть власні накладки 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 додайте Джерело браузера (Browser Source). Залиште Локальний файл вимкненим. Вставте повну адресу до 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 і ці файли. Лише довідка подій не пояснює керування опитуванням чи код компонування кожного оверлею.

Усунення несправностей

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