使用您的 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 疑難排解.