Використовуйте своє оформлення чату StreamElements

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

Відкрити імпортер чату

Що працює?

Імпортер призначений для власних віджетів чату , створених для StreamElements або Streamlabs, зокрема компонента чату в наборі тем. Потрібні вихідні файли віджета. Імпортер не переносить увесь обліковий запис StreamElements або тему з URL оверлею.

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

1. Отримайте файли віджета

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

Є лише посилання встановлення? Попросіть у дизайнера вихідний код віджета чату або використовуйте код у редакторі власного віджета StreamElements. Самого знімка екрана, відео чи URL браузерного джерела недостатньо для перетворення.

Код мого віджета в редакторі StreamElements

Відкрийте редактор коду власного віджета. Збережіть кожну доступну частину як окремий звичайний текстовий файл: html.txt, css.txt, js.txt, fields.txt і data.txt. Скопіюйте вміст без додавання форматування чи зміни JSON. Якщо файл даних недоступний, імпортер використовує стандартні значення з fields.

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

Імпортуйте лише код, якому довіряєте: JavaScript віджета виконується в попередньому перегляді й завантаженому оверлеї.

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

У меню SSN під розділом Готові оформлення оверлеїв чату, знайдіть пункт Імпортувати оформлення чату StreamElements / Streamlabs. Це підставляє поточну сесію. Також можна шукати в меню StreamElements або відкрити імпортер безпосередньо.

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

Імпортер чату з трьома кроками налаштування поряд із прикладами повідомлень та елементами Demo Preview, Live Preview і Download OBS HTML.
Імпортер із прикладом віджета й заповнювачем ID сесії. Імпортоване оформлення чату матиме власний дизайн.

3. Підключіть і перегляньте

  1. Залишайте SSN запущеним і переконайтеся, що справжнє повідомлення з’являється в його доку чату.
  2. Перевірте в імпортері ID сесії SSN / ID стріму. Якщо поле порожнє, скопіюйте значення з розділу Параметри сесії у SSN. Це не ваше ім’я користувача Twitch або YouTube.
  3. Введіть необов’язковий пароль сесії, якщо використовуєте його.
  4. Використовуйте Демоперегляд для прикладів повідомлень, потім Перегляд наживо і надішліть нове повідомлення чату у свій стрім.
  5. Якщо Історія повідомлень з’являється, налаштуйте видалення за часом або максимальну кількість повідомлень.

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

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

  1. Натисніть Завантажити HTML для OBS і збережіть у постійному місці.
  2. В OBS додайте Джерело браузера (Browser Source), увімкніть Локальний файлі виберіть цей HTML-файл.
  3. Задайте ширину й висоту області чату, а потім надішліть ще одне повідомлення для перевірки.

Сесію вже вбудовано; редагувати URL в OBS не потрібно. Використовуйте завантажений файл як браузерне джерело. Залишайте SSN і джерела захоплення чату запущеними; імпортер і StreamElements можна закрити.

Експортований файл містить ID сесії та необов’язковий пароль. Тримайте його приватним. Щоб пізніше змінити сесію, пароль або налаштування віджета, знову імпортуйте оригінальні файли й завантажте заміну, а потім оновіть джерело OBS.

Якщо щось не працює

  • Код віджета не знайдено: використовуйте оригінальні вихідні файли. Зображення, самі fields/data та раніше перетворені файли SSN не є вихідним кодом віджета.
  • Демо порожнє або виглядає неправильно: перевірте HTML/CSS/JS у розширеному виборі файлів. Надайте відповідні файли fields і data та всі ресурси.
  • Демо працює, перегляд наживо порожній: надішліть нове повідомлення, перевірте док SSN і відповідність ID сесії та пароля.
  • Перегляд наживо працює, OBS порожній: перевірте вибраний локальний HTML-файл, розміри й видимість браузерного джерела, а потім оновіть його кеш.
  • Шрифти або зображення відсутні: перегляньте підсумок експорту. Віддаленим ресурсам, які не вдалося вбудувати, усе одно потрібні доступний URL і доступ до Інтернету.
  • Повідомлення зникають: налаштуйте Message history, якщо віджет його надає. Деякі віджети керують видаленням у власному JavaScript.
  • API облікового запису або плагіни не працюють: деякі віджети потребують змін коду. Використовуйте запит для перетворення з імпортера або зверніться по допомогу з оригінальними файлами віджета й знімком екрана проблеми, не розкриваючи облікових даних сесії.

Інші варіанти: вбудовані оформлення чату, власний CSS, або Усунення несправностей OBS.