Галерея шаблонів

Перегляньте повну візуальну галерею оверлеївабо перегляньте власні шаблони й імпорти нижче.

Виберіть оформлення стріму

Перегляньте оверлеї чату, вибраних повідомлень і сповіщень, а потім додайте улюблений в OBS або Streamlabs.

Переглянути галерею оверлеїв 🚀 Налаштування 🛠️ Створіть власний ✨ Скопіювати запити до ШІ Імпортувати віджет StreamElements Посібник із налаштування StreamElements

🧭 Виберіть тип оверлею

💬 Об’єднаний чат

Поточна стрічка з підключених платформ. Почніть із шаблону чату або дока.

⭐ Вибране повідомлення

Одне повідомлення, яке ви вибираєте в доку. Вибирайте оформлення вибраних повідомлень для інтерв’ю, запитань і відповідей або привітань.

🎉 Сповіщення про події

Відзначайте нових підписників, членство та донати. Налаштовуйте анімації та звук у налаштуваннях сповіщень SSN. Посібник зі сповіщень

Бібліотека шаблонів

Знайдіть ідеальний шаблон для стріму

🔎 Знайдіть шаблон або тематичний набір

🎨 Узгоджені тематичні набори

Одне оформлення для трьох браузерних джерел. У галереї виберіть Використати узгоджений набір, введіть дані сесії, а потім скопіюйте посилання для OBS. Рух необов’язковий.

Сонний триколірний кіт, полуничне молоко й ніжно-рожеве канцелярське приладдя

🐱 Полуничний кіт

Сонний триколірний кіт, полуничне молоко й ніжно-рожеве канцелярське приладдя. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Веселий коргі на небесно-блакитній листівці

🐶 Добра компанія

Веселий коргі на небесно-блакитній листівці. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Казкова жабка в тихому лісі

🍄 Мох і гриби

Казкова жабка в тихому лісі. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Кролик-астронавт, що пливе крізь бузковий зоряний пил

🌙 Місячний кролик

Кролик-астронавт, що пливе крізь бузковий зоряний пил. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Маленький дракон зі сяйливим чарівним кристалом

🐉 Кришталевий вартовий

Маленький дракон зі сяйливим чарівним кристалом. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Єнот у навушниках і вініл у м’ятних та сливових тонах

🎵 Опівнічний мікстейп

Єнот у навушниках і вініл у м’ятних та сливових тонах. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Дружній привид, сяйливий гарбуз і опівнічний сливовий колір

🎃 Гарбузовий привид

Дружній привид, сяйливий гарбуз і опівнічний сливовий колір. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Олень у шарфі та святкова хвоя

🎄 Веселе оленятко

Олень у шарфі та святкова хвоя. Містить узгоджені стилі чату, вибраних повідомлень і сповіщень.

Переглянути й використати набір

Тематичні пакети

Повні тематичні пакети з документацією, прикладами зображень і посібниками

Вибрані

Тема Deuk

Повний пакет

Тема Deuk

Вишукана повністю анімована тема з налаштовуваними кольорами й плавними переходами. Ідеально для ігрових стрімів.

Новий

Тема Windows 3.1

Стиль ретро

Тема Windows 3.1

Ностальгійний оверлей чату у стилі Windows 3.1 із класичними вікнами й точними піксельними деталями.

Тема Neutron

Сучасний дизайн

Тема Neutron

Охайний сучасний дизайн із плавними анімаціями й чудовою читабельністю. Налаштовувані колірні схеми.

Прості готові шаблони

Готові шаблони, яким потрібен лише ваш ID сесії

Популярні

Приклад шаблону

Мінімальне

Приклад шаблону

Охайний легкий шаблон з основними функціями. Ідеальна основа для налаштування.

Гарний шаблон

Анімований

Гарний шаблон

Елегантний дизайн із плавними анімаціями й візуальними ефектами. Привертає увагу, але не відволікає.

Тема t3nk3y

Ігрові

Тема t3nk3y

Виразна висококонтрастна тема для ігрових стрімів із чудовою видимістю навіть у динамічному вмісті.

Тема «Рідке скло» LuckyLootTube

Рідке скло

Тема LuckyLootTube

Витончений анімований оверлей чату у стилі рідкого скла з плавними анімаціями й гарним відображенням емотів.

Шаблони, сумісні з CSS YouTube

Шаблони, що працюють зі стилями CSS YouTube

Шаблон CSS YouTube

Сумісні з YouTube

Шаблон CSS YouTube

Використовуйте CSS для YouTube з нашою сторінкою оверлею зі структурою YouTube. Сумісно зі стилями Septapus.

Шаблони для розробників

Основи для створення власних оверлеїв

Порожній шаблон

Розробник

Порожній шаблон

Мінімальний код для створення власного оверлею з нуля. Ідеально для розробників і програмування за допомогою LLM.

Приклад оверлею

Розробник

Приклад шаблону оверлею

Повніша основа з коментарями й документацією для створення власних оверлеїв.

Маєте шаблон, яким хочете поділитися?

Створили чудовий шаблон для Social Stream Ninja? Поділіться зі спільнотою, надіславши pull request до нашого репозиторію GitHub.

Надіслати на GitHub

Використання віджета чату StreamElements із Social Stream Ninja

Уперше імпортуєте? Прочитати повний посібник з оформлення чату щодо пошуку файлів віджета, підтримуваних форматів, налаштування OBS і усунення несправностей.

Це працює і з настільним застосунком SSN для Windows, і з розширенням Chrome — редагувати код не потрібно.

Переконайтеся, що SSN отримує чат

Відкрийте джерела платформ у застосунку або розширенні SSN, а потім надішліть тестове повідомлення. Продовжуйте лише після його появи в доку SSN.

Отримайте оригінальний експорт віджета

Використовуйте ZIP, папку або файли від дизайнера віджета. Придатний експорт зазвичай містить HTML, CSS, JavaScript, fields/data та ресурси. Знімка екрана або URL оверлею StreamElements недостатньо.

Відкрийте імпортер

Відкрийте імпортер і виберіть ZIP, папку або файли. Він визначає частини віджета й одразу показує демоперегляд.

Відкрити імпортер віджетів

Додайте ID сесії SSN

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

Виберіть історію повідомлень

Якщо імпортований віджет має сумісні налаштування, використовуйте Історія повідомлень , щоб вимкнути видалення за часом або змінити кількість повідомлень на екрані. Це змінює налаштування віджета, а не його код.

Перевірте перед завантаженням

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

Завантажте й додайте в OBS

Натисніть Завантажити HTML для OBS. В OBS додайте браузерне джерело, увімкніть Локальний файлі виберіть завантажений HTML-файл. Не додавайте ID сесії та не редагуйте URL в OBS. Залишайте SSN запущеним під час стріму; імпортер і StreamElements можна закрити.

Демо порожнє

Перевірте визначені файли в імпортері й використовуйте розширений вибір файлів, якщо він вибрав неправильні HTML, CSS або JavaScript.

Перегляд наживо порожній

Переконайтеся, що чат надходить у док SSN, а ID сесії та необов’язковий пароль точно збігаються.

OBS порожній

Використовуйте завантажений HTML-файл, а не сторінку імпортера, оригінальний ZIP чи URL StreamElements, а потім оновіть браузерне джерело OBS.

Як використовувати шаблони

Виконайте ці прості кроки, щоб почати

Виберіть шаблон

Перегляньте бібліотеку шаблонів і виберіть той, що пасує до стилю стріму. Порівнюйте дизайни в галереї знімків екрана; більшість вбудованих шаблонів працюють безпосередньо за URL без завантаження файлів.

Додайте ID сесії

Замініть YOURSESSIONID в URL шаблону на справжній ID сесії Social Stream Ninja з Session Options у застосунку або розширенні SSN. Додайте необов’язковий пароль, якщо ваша сесія його використовує.

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

Додайте в OBS/Streamlabs

Додайте змінений URL як браузерне джерело в програмі трансляції:

В OBS натисніть + під Sources і виберіть «Browser»
Назвіть джерело й натисніть OK
Вставте URL шаблону з ID сесії
Задайте ширину й висоту (рекомендовано: 1920×1080)
Натисніть OK, щоб додати до сцени

Налаштуйте шаблон

Персоналізуйте оверлей за допомогою власного CSS одним із таких способів:

Власний CSS OBS: Додайте CSS у властивості браузерного джерела
Параметр URL: Додайте &css=URL_TO_YOUR_CSS_FILE до URL шаблону
CSS у Base64: Для вбудованого CSS використовуйте &b64css=YOUR_BASE64_ENCODED_CSS

🛠️ Створіть власний шаблон

Почніть із робочого оверлею, а потім змініть його вигляд.

🎨 Змініть вигляд

Використовуйте браузерне джерело OBS Власний CSS для кольорів, відступів і типографіки. Збережіть початковий URL SSN і підключення.

📦 Додайте віджет

Маєте експорт віджета чату StreamElements? Відкрити конвертер StreamElements, перегляньте його, а потім завантажте HTML для OBS. Використовуйте оригінальний ZIP або файли, а не знімок екрана чи URL оверлею. Налаштування нижче.

🧩 Змініть поведінку

Скопіюйте робочий початковий приклад і відредагуйте його HTML, CSS та JavaScript. Швидкий старт · Посібник розробника · Поля подій

🔧 Файли, маршрутизація та перевірка

Використовуйте sampleoverlay.html для об’єднаного чату, featured-modern.html для вибраних повідомлень або multi-alerts.html для подій. Завантажте вихідний код і потрібні ресурси з бета-репозиторію.
Зберігайте початковий код підключення. Чат і оверлеї вибраних повідомлень отримують різні потоки; оформлення стрічки чату не перетворює її на оверлей вибраного повідомлення.
Зберігайте спільні скрипти, шрифти й зображення, на які є посилання, поряд із файлом за тими самими відносними шляхами або попросіть ШІ створити самодостатній експорт. Перейменування одного HTML-файлу не пакує його залежності.
Розмістіть файли на хостингу й використовуйте їхній URL із сесією та необов’язковим паролем. Для самодостатнього локального експорту дотримуйтеся його інструкцій конфігурації; OBS Local file не має поля URL для параметрів сесії.
Спочатку перегляньте вигадані дані, а потім перевірте зі своєю сесією SSN. Перевірте вибрані повідомлення, очищення, довгі імена, зображення та прозорий фон. Під час живого використання залишайте SSN запущеним.

Для поведінки на основі тригерів почніть із Редактор Event Flow і правил ефектів сповіщень перед написанням нового оверлею.

✨ Скопіюйте запит для свого ШІ

Виберіть основу, скопіюйте запит і замініть деталі дизайну в дужках. Прикріпіть вихідні файли, якщо ваш ШІ не може читати посилання. Не включайте приватні ID сесії та пароль до розмови.

💬 Об’єднаний чат

Редагований запит

Створіть оформлений оверлей об’єднаного чату SSN на основі https://github.com/steveseguin/social_stream/blob/beta/sampleoverlay.html . Отримуйте звичайний потік наживо (мітка dock), з обмеженим списком повідомлень, налаштовуваною кількістю та необов’язковим терміном показу. Збережіть значки платформ, оформлення донатів і членства. Спочатку перевірте поточний вихідний код SSN і документацію нижче. Якщо не можете відкрити їх, попросіть мене прикріпити файли; не вгадуйте транспорт або схему подій. Довідкові матеріали: https://github.com/steveseguin/social_stream/blob/beta/docs/customoverlays.md і https://socialstream.ninja/beta/docs/event-reference.html Збережіть підключення початкового оверлею, параметри session/password, label і server, обробку модерації/видалення/очищення та наявні поля повідомлень. Залишайте облікові дані заповнювачами YOUR_SESSION_ID / YOUR_PASSWORD, ніколи не справжніми значеннями. Використовуйте класичні скрипти, сумісні з Chrome 80 і OBS; збережіть відносні локальні залежності й перелічіть файли, які мають супроводжувати HTML. Розглядайте chatname як звичайний текст; textonly стосується лише chatmessage. Збережіть безпечні емоти/значки, повідомлення лише із зображенням contentimg і змішаний трафік подій/метаданих, не показуючи оновлення лише метаданих як чат. Не вставляйте неперевірений HTML і не вигадуйте поля верхнього рівня даних. Дизайн: [опишіть кольори, настрій, типографіку, розміщення та рух]. Полотно: [ширина x висота]. Залиште фон прозорим, текст читабельним поверх гри, довгі імена/повідомлення в межах і додайте оформлення зі зменшеним рухом. Поверніть повні змінені файли, прості інструкції налаштування та демонстраційний режим із вигаданими даними, який ніколи не підключається до живої сесії. Перевірте довгий текст, емодзі, повідомлення лише із зображенням, видалення, очищення, зміну розміру й повторні підключення.

⭐ Вибране повідомлення

Редагований запит

Налаштуйте https://github.com/steveseguin/social_stream/blob/beta/themes/featured-styles/featured-modern.html для одного вибраного повідомлення. Збережіть стандартну маршрутизацію featured/overlay та поведінку очищення; не показуйте автоматично кожне повідомлення чату. Поясніть, як вибрати повідомлення в доку SSN. Спочатку перевірте поточний вихідний код SSN і документацію нижче. Якщо не можете відкрити їх, попросіть мене прикріпити файли; не вгадуйте транспорт або схему подій. Довідкові матеріали: https://github.com/steveseguin/social_stream/blob/beta/docs/customoverlays.md і https://socialstream.ninja/beta/docs/event-reference.html Збережіть підключення початкового оверлею, параметри session/password, label і server, обробку модерації/видалення/очищення та наявні поля повідомлень. Залишайте облікові дані заповнювачами YOUR_SESSION_ID / YOUR_PASSWORD, ніколи не справжніми значеннями. Використовуйте класичні скрипти, сумісні з Chrome 80 і OBS; збережіть відносні локальні залежності й перелічіть файли, які мають супроводжувати HTML. Розглядайте chatname як звичайний текст; textonly стосується лише chatmessage. Збережіть безпечні емоти/значки, повідомлення лише із зображенням contentimg і змішаний трафік подій/метаданих, не показуючи оновлення лише метаданих як чат. Не вставляйте неперевірений HTML і не вигадуйте поля верхнього рівня даних. Дизайн: [опишіть кольори, настрій, типографіку, розміщення та рух]. Полотно: [ширина x висота]. Залиште фон прозорим, текст читабельним поверх гри, довгі імена/повідомлення в межах і додайте оформлення зі зменшеним рухом. Поверніть повні змінені файли, прості інструкції налаштування та демонстраційний режим із вигаданими даними, який ніколи не підключається до живої сесії. Перевірте довгий текст, емодзі, повідомлення лише із зображенням, видалення, очищення, зміну розміру й повторні підключення.

🎉 Сповіщення зі звуком

Редагований запит

Налаштуйте https://github.com/steveseguin/social_stream/blob/beta/multi-alerts.html . Спочатку перегляньте його спільні залежності сповіщень і https://socialstream.ninja/beta/docs/alert-effects.html . Повторно використайте наявні фільтри типів сповіщень, чергу, бібліотеку звуків, правила вимкнення звуку/гучності й ефектів. Залиште пороги USD на наявному шляху перетворення currency.js; не порівнюйте форматовані валютні рядки. Підтримайте необов’язкові анімацію та звук для правила донату $100 USD з урахуванням увімкненого стану та наявної семантики діапазонів. Уникайте подвійного відтворення. Використовуйте лише аудіо, яке я надаю або маю дозвіл використовувати. Спочатку перевірте поточний вихідний код SSN і документацію нижче. Якщо не можете відкрити їх, попросіть мене прикріпити файли; не вгадуйте транспорт або схему подій. Довідкові матеріали: https://github.com/steveseguin/social_stream/blob/beta/docs/customoverlays.md і https://socialstream.ninja/beta/docs/event-reference.html Збережіть підключення початкового оверлею, параметри session/password, label і server, обробку модерації/видалення/очищення та наявні поля повідомлень. Залишайте облікові дані заповнювачами YOUR_SESSION_ID / YOUR_PASSWORD, ніколи не справжніми значеннями. Використовуйте класичні скрипти, сумісні з Chrome 80 і OBS; збережіть відносні локальні залежності й перелічіть файли, які мають супроводжувати HTML. Розглядайте chatname як звичайний текст; textonly стосується лише chatmessage. Збережіть безпечні емоти/значки, повідомлення лише із зображенням contentimg і змішаний трафік подій/метаданих, не показуючи оновлення лише метаданих як чат. Не вставляйте неперевірений HTML і не вигадуйте поля верхнього рівня даних. Дизайн: [опишіть кольори, настрій, типографіку, розміщення та рух]. Полотно: [ширина x висота]. Залиште фон прозорим, текст читабельним поверх гри, довгі імена/повідомлення в межах і додайте оформлення зі зменшеним рухом. Поверніть повні змінені файли, прості інструкції налаштування та демонстраційний режим із вигаданими даними, який ніколи не підключається до живої сесії. Перевірте довгий текст, емодзі, повідомлення лише із зображенням, видалення, очищення, зміну розміру й повторні підключення.

🎨 Нове оформлення лише через CSS

Редагований запит

Змініть оформлення мого наявного оверлею SSN лише через CSS. Я надам його URL і вихідний HTML/CSS. Залиште весь JavaScript і маршрутизацію повідомлень без змін. Перевірте справжні селектори DOM перед написанням CSS. Надайте CSS для поля Custom CSS браузерного джерела OBS і всі потрібні локальні ресурси шрифтів/зображень. Спочатку перевірте поточний вихідний код SSN і документацію нижче. Якщо не можете відкрити їх, попросіть мене прикріпити файли; не вгадуйте транспорт або схему подій. Довідкові матеріали: https://github.com/steveseguin/social_stream/blob/beta/docs/customoverlays.md і https://socialstream.ninja/beta/docs/event-reference.html Збережіть підключення початкового оверлею, параметри session/password, label і server, обробку модерації/видалення/очищення та наявні поля повідомлень. Залишайте облікові дані заповнювачами YOUR_SESSION_ID / YOUR_PASSWORD, ніколи не справжніми значеннями. Використовуйте класичні скрипти, сумісні з Chrome 80 і OBS; збережіть відносні локальні залежності й перелічіть файли, які мають супроводжувати HTML. Розглядайте chatname як звичайний текст; textonly стосується лише chatmessage. Збережіть безпечні емоти/значки, повідомлення лише із зображенням contentimg і змішаний трафік подій/метаданих, не показуючи оновлення лише метаданих як чат. Не вставляйте неперевірений HTML і не вигадуйте поля верхнього рівня даних. Дизайн: [опишіть кольори, настрій, типографіку, розміщення та рух]. Полотно: [ширина x висота]. Залиште фон прозорим, текст читабельним поверх гри, довгі імена/повідомлення в межах і додайте оформлення зі зменшеним рухом. Поверніть повні змінені файли, прості інструкції налаштування та демонстраційний режим із вигаданими даними, який ніколи не підключається до живої сесії. Перевірте довгий текст, емодзі, повідомлення лише із зображенням, видалення, очищення, зміну розміру й повторні підключення.

Перетворюєте складніший віджет? Використати повний запит перетворення StreamElements / Streamlabs.

Відеоурок

Дізнайтеся, як створити власний оверлей чату за допомогою ШІ

Короткий посібник із відео

Знайдіть приклад шаблону оверлею (sampleoverlay.html)
Скопіюйте код шаблону до буфера обміну
Скористайтеся ШІ-помічником, як-от Claude, для налаштування
Попросіть ШІ змінити CSS відповідно до бажаного стилю
Налаштуйте OBS для використання свого зміненого шаблону
Застосуйте власний CSS через налаштування браузерного джерела OBS