要使最近的警报在 OBS 或 Streamlabs Desktop 中可见，请从 图解事件叠加指南.
选择正确的起始页
使用 multi-alerts.html 用于定时警报演示和 events.html 或 themes/events/index.html 获取正在运行的事件列表。它们具有不同的渲染和队列行为。从为您已使用的工具生成的 URL 开始。
选择活动源样式
打开 活动源/事件 → 启用和自定义 → 源样式，选择布局，然后将更新的链接复制到您的浏览器或 OBS 浏览器源中。打开 自定义提要外观 调整颜色和间距。将字段留空以使用样式的默认值。
| 样式 | URL 选项 | 外观 |
|---|---|---|
| 卡（默认） | style=default 或省略它 | 带有平台边框和事件标签的原始事件卡。 |
| 紧凑 | style=compact | 密集的行，内嵌名称和消息。 |
| Twitch风格 | style=twitch | 带有平台图标、紫色强调和行分隔符的扁平活动列表。 |
| 时间轴 | style=timeline | 具有黄金时间线的连接事件卡。 |
| 玻璃 | style=glass | 带有柔和阴影的圆形半透明卡片。 |
| 极低 | style=minimal | 没有框的阴影文本，用于放置在视频上 transparent. |
| 股票行情指示器 | style=ticker | 一排水平的药丸，最新的在左边，用于下三分之一的条带。隐藏时间戳和详细信息。 |
将这些选项添加到您现有的 events.html?session=YOUR_SESSION_ID 链接到 &。保留您的会话、密码和连接选项。
accent,pagebg,cardbg,textcolor，以及mutedcolor：CSS 颜色。对十六进制颜色进行编码#作为%23在 URL 中，或省略#.fontsize=14：文本大小，10–40 像素。padding=8,gap=4，以及radius=6：行填充、事件之间的间距和角半径，每个 0-40 像素。noheader隐藏页面标题；noanimation禁用进入动画。- 将样式与
lightmode,transparent,font,googlefont,scale,notime，以及hidemeta。透明模式覆盖页面背景；卡片背景保持单独可调。
例如，附加 &style=twitch&accent=%23e5b94f&padding=8&fontsize=14 以获得带有金色口音的更密集的活动列表。
选择活动源中显示的内容
在 活动源/事件 → 启用和自定义，打开 选择出现哪些事件 或 行内容和行为。将控件关闭并将字段留空以保留默认视图。更改后复制更新的链接。这些控制仅影响此提要；普通聊天仍然被排除在外。
每一行根据其事件名称属于一个类别。指定的会员资格、礼物和购买项目即使包含金额，也会保留其类别。提示与 hasDonation 并且没有识别的事件名称属于付费消息类别，包括 Twitch DOM 位。普通聊天中的会员徽章不会将其变成会员活动。
| 隐藏类别 | URL 选项 | 涵盖的活动 |
|---|---|---|
| 关注/免费订阅 | hidefollows | new_follower，包括免费的 YouTube 订户提醒；较老的 follow/followed 名称。 |
| 订阅/会员资格 | hidememberships | new_subscriber, resub, sponsorship、会员里程碑和旧会员名称。 |
| 赠品订阅/会员资格 | hidegiftmemberships | subscription_gift, giftpurchase, giftredemption 以及遗留的礼物会员名称。还有 new_subscriber 带有 meta.isGift: true. |
| 提示/付费消息 | hidepaid | superchat, supersticker, cheer, donation, thankyou，以及其他未分类的行 hasDonation. |
| 虚拟/愿望清单礼物 | hidegifts | gift, jeweldonation, giftcontribution, giftfunded。天才会员有自己的类别。 |
| 购买 | hidepurchases | purchase. |
| 突袭/重定向 | hideraids | raid，YouTube redirect. |
| 通道积分兑换 | hiderewards | reward，包括 channel_points 别名。 |
| 炒作列车 | hidehypetrain | hype_train 面板和更新。 |
| 计数/流状态 | hidestatus | 查看者、关注者、订阅者、查看和点赞计数行；流式传输在线/离线行。可选的观看者计数栏是单独控制的。 |
| 广告通知 | hideads | ad_break, ad_request, ad_schedule. |
| 加入/点赞/分享/连连 | hideactivity | joined, liked, shared, share, share_live, watch_streak. |
| 其他注意事项 | hideother | 未分类事件，包括未命名的事件 event: true 没有捐款金额的通知。 |
为了更精细地控制，请使用 filterevents=supersticker,watch_streak 隐藏确切的事件名称。匹配忽略大小写并使用 feed 的现有事件别名；它不搜索消息文本。类别和确切名称排除与现有来源、仅限捐赠、仅限有天赋的订阅者和最小值过滤器相结合。启用多个过滤器可能不会留下任何匹配的事件。请参阅 事件参考 对于特定于源的有效负载。
hidemessage,hidecontentimg,hideplatformicons,hideeventlabels和hideamounts隐藏相应的行元素。他们不会丢弃事件或更改点击功能发送的内容。内联表情是消息文本的一部分。这些控件不会编辑消息文本、元数据或 Hype Train 详细信息中写入的金额或名称。nofeature禁用此 feed 中的点击功能。元数据详细信息仍然可以打开。hidecategorytaghides only the generic category tag, such as Donation or Event, while keeping the descriptive event label. In the popup, enable Hide category tag ；对应的设置项： 行内容和行为.eventduration=6060 秒后从此 feed 中删除一行。空白或0保持现有的保留行为；正值范围为 1 到 86,400 秒。 Hype Train更新重新启动计时器；结束的火车最多 30 秒后仍然消失。删除不会清除已发送到精选叠加层的事件。hideempty当没有事件可见时隐藏等待消息。
下载并保存文件结构
- 下载源ZIP 并提取它。这些指南使用测试版源；将一次下载的文件放在一起。
- 复制
multi-alerts.html为my-alerts.html原文旁边。如果选择不同的页面或主题，请将其副本保留在该文件的原始文件夹中。 - 在编辑器或 AI 工具中打开复制的 HTML 及其引用的 CSS/JS。将提供的图稿/字体添加到同一项目并使用相对路径。从 CSS 覆盖开始；更改生成的标记时包括渲染器。
以下文件可帮助您找到设计和行为。这是一个阅读列表，而不是完整的依赖包：保持提取的文件夹完整，包括图像、字体、脚本和任何数据文件。
| 文件 | 为什么它很重要 |
|---|---|
multi-alerts.html | 警报呈现标记和样式。 |
multi-alerts.js | 事件分类、渲染、队列和警报行为。 |
events.html | 正在运行的事件源，而不是单个定时警报。 |
themes/events/index.html | 主题事件源页面。 |
currency.js | 捐赠价值换算。 |
shared/utils/chatHtml.js | 带有 libs/objects.js 的安全消息 HTML。 |
shared/stickers/player.js | 贴纸效果，带有 catalog.js 和媒体资源。 |
连接您的副本并在 OBS 中打开它
启动SSN并首先使原始生成的覆盖URL起作用。的 session= 值连接到该 SSN 会话；这不是您的频道名称或此文件的名称。保持 SSN、相关功能及其数据源运行。
当您需要上游修复时的
- 将编辑后的 HTML 文件拖到 Chrome 或 Edge 中。从地址栏复制其地址；它开始于
file:///. - 复制所有内容
?继续在您的工作 SSN 覆盖链接中并将其添加到该文件地址的末尾。保留所有设置，包括会话、密码和任何#结局。 - 在浏览器中打开结果，然后设置 OBS 浏览器源的 URL 与以下地址相同 本地文件 未检查。将源尺寸与您的预期设计相匹配。
对于上面的起始文件，本地地址如下所示；您的实际链接可能包含其他必需选项：
file:///C:/SSN/social_stream-beta/my-alerts.html?session=YOUR_SESSION使用计算机上的实际文件地址。 OBS 与源码一起保存；将下载的文件夹保留在同一位置。保存设计更改后，刷新浏览器源。的 共享设置指南 包括 Mac 示例和本地文件复选框的可选启动器。
哪里需要改变设计
更改警报框架、版式、图标位置、进度/计时装饰和动作。在 Multi-Alerts 中，大部分布局是在 multi-alerts.js；当要求人工智能改变结构时包括它。对于孤立的分支，也复制该脚本并仅更新复制的 HTML 脚本引用。
保留事件分类和过滤器。付费聊天行可以使用 hasDonation 不带 event: "donation"；平台也有特定的事件名称。使用 事件参考 和 兼容性指南 选择样本。将原始显示金额和任何数字美元覆盖分开。
复制此AI提示
将您复制的源文件和参考图稿提供给人工智能。替换括号内的详细信息。将输入安全说明保留在提示中。
显示完整提示
Customize my-alerts.html, copied from multi-alerts.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].
Restyle this [Multi-Alerts / event feed] as [design]. Include the companion JS when changing generated markup. Keep event classification, filters, queues, timing, sound controls, deduplication, and reset behavior. Honor numeric donoValue including zero; display hasDonation in its original unit. Do not collapse distinct event types into a generic donation event.
Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.
Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.
Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.测试此覆盖类型
首先使用预览或测试设置。的 测试消息指南 解释了如何通过SSN发送虚构的有效负载；提交到生产会话的测试可以触发其现有的自动化。
- 使用测试消息工具发送您的来源支持的特定关注、订阅、礼物、突袭或付费消息；检查哪些字段实际存在。
- 发送两个靠近的警报来检查队列和退出动画。测试带有捐赠标签和长名称的空消息。
- 对于事件源，检查滚动、过滤和任何点击功能行为。对于声音效果，请检查 OBS 中的源音频以及图片。
同时运行 输入渲染检查 针对您更改的渲染路径。保存编辑后，在排练之间刷新 OBS 浏览器源并重复可见的交互。浏览器预览不会建立实时捕获或 OBS 行为。