Используйте своё оформление чата StreamElements

Импортируйте пользовательский виджет чата, проверьте его в Social Stream Ninja и скачайте файл для OBS.

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

Что поддерживается?

Импортёр предназначен для пользовательских виджетов чата для StreamElements или Streamlabs, в том числе компонента чата из набора темы. Нужны исходные файлы виджета. Импортёр не переносит весь аккаунт StreamElements или тему по URL оверлея.

Используйте настольное приложение SSN для Windows или расширение Chrome для захвата чата. Импортированное оформление показывает этот чат в OBS. Совместимость зависит от виджета; функции аккаунта, такие как цели, лояльность, магазины и оповещения, могут требовать ручного преобразования.

1. Получите файлы виджета

Начните с исходного ZIP-архива или папки от дизайнера. Найдите HTML, CSS и JavaScript, а также JSON с полями и данными, изображения и шрифты. Если набор содержит несколько оформлений, выберите один виджет чата.

Есть только ссылка установки? Попросите у дизайнера исходники виджета чата или возьмите код из редактора пользовательского виджета StreamElements. Одного снимка экрана, видео или URL источника «Браузер» для преобразования недостаточно.

Код моего виджета находится в редакторе StreamElements

Откройте редактор кода пользовательского виджета. Сохраните каждую доступную часть в отдельный обычный текстовый файл: html.txt, css.txt, js.txt, fields.txt и data.txt. Скопируйте содержимое без дополнительного форматирования или изменения JSON. Если файла данных нет, импортёр использует значения по умолчанию из fields.

Выберите все эти файлы вместе с помощью кнопки Выбрать файлы. Добавьте все локальные изображения и шрифты; Выбрать папку сохраняет пути папок. См. справку по редактору кода StreamElements для кода и структуры полей.

Импортируйте только код, которому доверяете: JavaScript виджета выполняется в предпросмотре и скачанном оверлее.

2. Откройте импортёр

В меню SSN под разделом Готовые оформления чата, найдите пункт Импорт оформления чата StreamElements / Streamlabs. Текущая сессия подставится автоматически. Также можно найти в меню StreamElements или открыть импортёр напрямую.

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

Импортёр чата: три шага настройки рядом с примерами сообщений, кнопки демонстрационного и живого предпросмотра и скачивания HTML для OBS.
Импортёр с примером виджета и условным ID сессии. Импортированное вами оформление чата будет иметь собственный дизайн.

3. Подключите и проверьте

  1. Оставьте SSN запущенным и убедитесь, что настоящее сообщение появляется в его док-панели чата.
  2. Проверьте в импортёре ID сессии / трансляции SSN. Если поле пустое, скопируйте значение из раздела Параметры сеанса в SSN. Это не ваше имя пользователя Twitch или YouTube.
  3. Введите необязательный пароль сессии, если используете его.
  4. Используйте Демонстрационный предпросмотр для примеров сообщений, затем Живой предпросмотр и отправьте новое сообщение в чат трансляции.
  5. Если История сообщений появится, настройте удаление по времени или максимальное количество сообщений.

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

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

  1. Нажмите Скачать HTML для OBS и сохраните его в постоянном месте.
  2. В OBS добавьте Источник «Браузер», включите Локальный файли выберите этот HTML-файл.
  3. Задайте ширину и высоту области чата, затем отправьте ещё одно сообщение для проверки.

Сессия уже встроена в файл; редактировать URL в OBS не требуется. Используйте скачанный файл как источник «Браузер». Оставьте SSN и источники захвата чата запущенными; импортёр и StreamElements можно закрыть.

Экспортированный файл содержит ID сессии и необязательный пароль. Храните его в секрете. Чтобы позже изменить сессию, пароль или настройки виджета, заново импортируйте исходные файлы, скачайте замену и обновите источник OBS.

Если что-то не работает

  • Код виджета не найден: используйте оригинальные исходники. Одни изображения, файлы fields/data и ранее преобразованные файлы SSN не являются исходниками виджета.
  • Демонстрация пуста или выглядит неправильно: проверьте HTML/CSS/JS в расширенном выборе файлов. Добавьте соответствующие файлы fields и data и все ресурсы.
  • Демонстрация работает, живой предпросмотр пуст: отправьте новое сообщение, проверьте док-панель SSN и совпадение ID сессии и пароля.
  • Живой предпросмотр работает, OBS пуст: проверьте выбранный локальный HTML-файл, размеры и видимость источника «Браузер», затем обновите его кэш.
  • Отсутствуют шрифты или изображения: проверьте сводку экспорта. Удалённым ресурсам, которые не удалось встроить, по-прежнему нужны доступный URL и интернет.
  • Сообщения исчезают: настройте историю сообщений, если виджет предоставляет такую настройку. Некоторые виджеты удаляют сообщения собственным JavaScript.
  • API аккаунта или плагины не работают: некоторым виджетам нужны изменения кода. Используйте запрос для преобразования из импортёра или обратитесь за помощью приложив исходные файлы виджета и снимок проблемы, но не раскрывая данные доступа к сессии.

Другие варианты: встроенные оформления чата, пользовательский CSS, или Устранение неполадок OBS.