安装指南

几分钟内装好您的提醒

FrameWork Alerts 在 OBS 和 Streamlabs 中的完整安装教程——有视频，也有图文步骤。

Streamlabs + OBS

每款 FrameWork 提醒的安装方式都一样：OBS 中的一个 Browser Source、Streamlabs 上的一个 Text Over Image 变体，以及下载包里附带的 Custom Fields。看一遍视频，或按照下方的图文步骤操作。

完整视频教程为英文 · Streamlabs + OBS

第 1 部分

在 OBS 中设置 Browser Source

  1. 打开您的提醒平台（Streamlabs），进入 Alerts 部分。

  2. 选择要设置的提醒类型（Followers、Subscribers、Donations 等），并取消勾选所有不用于全屏提醒的类型。

  3. 复制平台提供的 Widget URL。

  4. 打开 OBS → 添加新来源 → 选择 Browser Source → 起一个清楚的名字（例如 Alerts - Fullscreen）。

  5. 把复制的网址粘贴到 URL 字段中。

  6. 将 Width 和 Height 设置为与画布分辨率一致：

    • 在 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 部分

修复同一类别中的小提醒

如果同一类别中既有全屏提醒又有小提醒（例如全屏 Follower 提醒 + 小型 Follower 提醒），由于两者共用同一个组件链接，小提醒的缩放会出错。按以下步骤修复。

  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：使用平台自带的布局选项（不是 Custom Fields 里的那个）设为 Image Above

您的提醒现已完整安装并配置完毕。如果遇到任何问题，请在我们的网站上提交工单，我们会尽快回复您。

卡在某一步了？

提交一张工单，写明您使用的平台和进行到的步骤，工作室会一步步带您完成。

提交工单