使用您的 StreamElements 聊天皮肤

导入自定义聊天组件,使用 Social Stream Ninja 预览,并下载适用于 OBS 的文件。

打开聊天导入器

支持哪些内容?

此导入器用于 自定义聊天组件 ,为 StreamElements 或 Streamlabs 制作,包括主题套装中的聊天组件。您需要组件源文件。它不会导入整个 StreamElements 账号,也不能从叠加层 URL 导入主题。

使用以下任一方式: SSN Windows 桌面应用或 Chrome 扩展 来捕获聊天。导入的皮肤在 OBS 中显示该聊天。兼容性取决于组件;目标、忠诚度、商店和提醒等账号功能可能需要手动转换。

1. 获取组件文件

从设计师提供的原始 ZIP 或文件夹开始。查找 HTML、CSS 和 JavaScript,以及所有 fields/data JSON、图片和字体。套装包含多个设计时,请选择一个聊天组件。

只有安装链接? 向设计师索取聊天组件源文件,或使用 StreamElements 自定义组件编辑器中的代码。仅凭截图、视频或浏览器来源 URL 无法完成转换。

我的组件代码在 StreamElements 编辑器中

打开自定义组件的代码编辑器。将每个可用部分分别保存为纯文本文件: html.txt, css.txt, js.txt, fields.txt 和 data.txt。复制内容,不要添加格式或更改 JSON。如果没有数据文件,导入器会使用 fields 中的默认值。

使用以下功能一次选择所有这些文件: 选择文件。包含所有本地插画或字体; 选择文件夹 会保留文件夹路径。参见 StreamElements 代码编辑器参考 了解代码和字段结构。

只导入您信任的代码:组件 JavaScript 会在预览和下载的叠加层中运行。

2. 打开导入器

在 SSN 菜单中,找到以下部分: 预设样式聊天叠加层,然后在其下方查找选项: 导入 StreamElements/Streamlabs 聊天皮肤。这会填入当前会话。您也可以在菜单中搜索 StreamElements 或 直接打开导入器.

使用 选择 ZIP, 选择文件 或 选择文件夹。文件处理完成后会加载演示预览。请检查导入警告;使用 高级文件选择 ,如果检测到错误的源文件。

聊天导入器,在示例聊天消息旁显示三个设置步骤,以及演示预览、实时预览和下载 OBS HTML 控件。
使用示例组件和占位会话 ID 的导入器。您导入的聊天皮肤会呈现其自己的设计。

3. 连接并预览

  1. 保持 SSN 运行,并确认其聊天停靠面板中出现真实消息。
  2. 检查导入器的 SSN 会话 ID/直播 ID。如果为空,请从以下位置复制: 会话选项 ,位于 SSN 中。这不是您的 Twitch 或 YouTube 用户名。
  3. 如果使用会话密码,请输入该可选密码。
  4. 使用 演示预览 查看示例消息,然后 实时预览 并向直播发送一条新聊天消息。
  5. 如果 消息历史 出现时,调整定时移除或最大消息数量。

演示预览无需会话,仅使用示例消息。实时预览需要 SSN 收到聊天;预览为空本身不代表连接失败。

4. 下载并添加到 OBS

  1. 点击 下载 OBS HTML 并将其保存到固定位置。
  2. 在 OBS 中,添加 浏览器来源,启用 本地文件,并浏览选择该 HTML 文件。
  3. 为聊天区域设置宽度和高度,再发送一条消息检查。

会话已嵌入其中; 无需在 OBS 中编辑 URL。将下载的文件用作浏览器来源。保持 SSN 和聊天捕获来源运行;您可以关闭导入器和 StreamElements。

导出文件包含会话 ID 和可选密码,请妥善保密。以后更改会话、密码或组件设置时,需重新导入原始文件并下载替代文件,然后刷新 OBS 来源。

如果出现问题

  • 未找到组件代码: 使用原始源文件。图片、单独的 fields/data 文件和以前转换过的 SSN 文件都不是组件源文件。
  • 演示为空白或外观不正确: 检查高级文件选择中的 HTML/CSS/JS。提供匹配的 fields 和 data 文件以及所有资源。
  • 演示正常,实时预览空白: 发送新消息,检查 SSN 停靠面板,并确认会话 ID 和密码一致。
  • 实时预览正常,OBS 空白: 检查选中的本地 HTML 文件、浏览器来源尺寸和可见性,然后刷新缓存。
  • 缺少字体或插画: 检查导出摘要。无法嵌入的远程资源仍需要可访问的 URL 和互联网连接。
  • 消息消失: 如果组件提供消息历史设置,请调整它。有些组件在自己的 JavaScript 中控制移除行为。
  • 账号 API 或插件失败: 有些组件需要修改代码。使用导入器的转换提示词,或 寻求帮助 ,提供原始组件文件和问题截图,但不要分享会话凭据。

其他选项: 内置聊天皮肤, 自定义 CSS,或 OBS 故障排除.