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

Откройте полную визуальную галерею оверлеевили изучите собственные шаблоны и импорт ниже.

Выберите оформление для трансляции

Просмотрите оверлеи чата, выделенных сообщений и оповещений и добавьте понравившийся в 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, поля/данные и ресурсы. Снимка экрана или URL оверлея StreamElements недостаточно.

Открыть импортёр

Откройте импортёр и выберите ZIP, папку или файлы. Он определит части виджета и сразу покажет демонстрационный предпросмотр.

Открыть импортёр виджетов

Добавьте ID вашей сессии SSN

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

Выберите историю сообщений

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

Проверьте перед загрузкой

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

Скачайте и добавьте в OBS

Нажмите Скачать HTML для OBS. В OBS добавьте источник «Браузер», включите Локальный файли выберите загруженный HTML-файл. Не добавляйте ID сессии и не редактируйте URL в OBS. Во время трансляции SSN должен работать; импортёр и StreamElements можно закрыть.

Демонстрация пустая

Проверьте обнаруженные файлы в импортёре и используйте Advanced file selection, если выбран неверный HTML, CSS или JavaScript.

Live Preview пуст

Убедитесь, что чат поступает в док 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 нажмите + под списком источников и выберите «Браузер»
Назовите источник и нажмите 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 для событий. Скачайте исходный код и нужные ресурсы из репозитория beta.
Сохраните исходный код подключения. Чат и оверлеи выделенных сообщений получают разные потоки; изменение стиля чат-ленты не превращает её в оверлей выбранного сообщения.
Храните используемые общие скрипты, шрифты и изображения рядом с файлом с теми же относительными путями или попросите ИИ сделать автономный экспорт. Переименование одного HTML-файла не включает в него зависимости.
Разместите файлы на сервере и используйте их URL с вашей сессией и необязательным паролем. Для автономного локального экспорта следуйте его инструкциям настройки; в режиме Local file OBS нет поля 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