Инструкция

Установите алерты за пару минут

Полная инструкция по FrameWork Alerts для OBS и Streamlabs — на видео и по шагам в тексте.

Streamlabs + OBS

Все алерты FrameWork устанавливаются одинаково: Browser Source в OBS, вариация Text Over Image в Streamlabs и Custom Fields из вашего архива. Посмотрите видео один раз или следуйте шагам ниже.

Полная видеоинструкция на английском · Streamlabs + OBS

Часть 1

Настройте Browser Source в OBS

  1. Откройте свою платформу алертов (Streamlabs) и перейдите в раздел Alerts.

  2. Выберите тип алерта, который хотите настроить (Followers, Subscribers, Donations и т. д.), и снимите отметки с типов алертов, которые не используете для полноэкранных алертов.

  3. Скопируйте Widget URL, который даёт платформа.

  4. Откройте OBS → добавьте новый источник → выберите Browser Source → дайте ему понятное имя (например, Alerts - Fullscreen).

  5. Вставьте скопированный адрес в поле URL.

  6. Задайте Width и Height равными разрешению вашей сцены (canvas):

    • Его можно найти в OBS: Settings → Video → Base (Canvas) Resolution

  7. Включите «Shutdown source when not visible».

  8. Нажмите OK и убедитесь, что этот Browser Source находится в самом верху списка источников, над всеми остальными.

Часть 2

Настройте вариацию алерта

  1. На платформе алертов добавьте новую вариацию для выбранного типа алерта и дайте ей понятное имя.

  2. Установите Layout в значение «Text Over Image» (это нужно, чтобы алерт отображался правильно).

  3. В разделе Image перетащите файл алерта и нажмите Select.

  4. Настройте Alert Duration:

    • Воспроизведите алерт и запишите его полную длительность.
    • Вычтите из неё 1 секунду и введите результат в поле Alert Duration.
    • Пример: если алерт длится 35 секунд → введите 34 секунды.

  5. Sound → оставьте как есть (пропустите).

  6. Alert Animation → выберите Fade In / Fade Out (рекомендуется).

  7. Text Animation и Font → настройте на свой вкус.

Часть 3

Добавьте свой HTML / CSS / JS

  1. Включите переключатель Custom HTML/CSS.

  2. Вернитесь в папку алерта и откройте файл «Custom Fields — For Full Screen Alerts».

  3. Скопируйте и вставьте каждый файл в соответствующий раздел платформы:

    • HTML → во вкладку HTML
    • CSS → во вкладку CSS
    • JS → во вкладку JS

  4. Нажмите «Custom Fields» → «Edit Custom Fields» → вставьте файл Custom Fields.

  5. Нажмите «Update Custom Fields», а затем Save (справа внизу).

Часть 4

Тонкая настройка через Custom Fields

После сохранения откройте Custom Fields, чтобы получить доступ к этим параметрам:

Text DelayВоспроизведите алерт и поставьте на паузу, когда экран станет чёрным. Запомните этот момент — у всех алертов в конце около 4 секунд чёрного экрана. Введите здесь это точное время.
Text Horizontal PositionПоложение текста слева направо. Укажите 50, чтобы выровнять по центру.
Text Vertical PositionПоложение текста сверху вниз. Укажите 50, чтобы выровнять по центру.
Alert VolumeУже оптимизирована. При необходимости уменьшите.

Когда всё настроено, нажмите Test Alert, чтобы убедиться, что всё работает правильно.

Часть 5

Исправьте маленькие алерты в том же разделе

Если в одной категории у вас есть полноэкранный и маленький алерт (например, полноэкранный алерт на фолловера + маленький алерт на фолловера), маленький будет отображаться неправильного размера, потому что у них общая ссылка на виджет. Чтобы это исправить, выполните следующие шаги.

  1. Откройте вариацию маленького алерта.

  2. Включите Custom HTML/CSS.

  3. Вернитесь в папку алерта и откройте «Custom Fields — For Non-Full-Screen Alerts».

  4. Скопируйте и вставьте каждый файл в нужную вкладку:

    • HTML → вкладка HTML
    • CSS → вкладка CSS
    • JS → вкладка JS

  5. Нажмите «Edit Custom Fields» → вставьте файл Custom Fields → нажмите «Update Custom Fields» → нажмите Save.

  6. Откройте Custom Fields этой вариации и задайте:

    • Horizontal Position: 50
    • Vertical Position: 25
    • Image Size: определяет размер, в котором показывается алерт
    • Alert Layout: выберите Image Above в настройках макета самой платформы (не в Custom Fields)

Ваши алерты установлены и полностью настроены. Если возникнут проблемы, создайте обращение в поддержку на нашем сайте — мы ответим как можно скорее.

Застряли на каком-то шаге?

Создайте обращение в поддержку, укажите платформу и шаг, на котором остановились, — студия проведёт вас дальше.

Создать обращение