首頁›指南›看起來最適合裝留言區的那個 Wix 元件，正好是唯一裝不了的

看起來最適合裝留言區的那個 Wix 元件，正好是唯一裝不了的

真正的入口不在畫布上的內嵌元件，而在網站管理介面的 Custom Code。

Mr. Latte
更新

Wix 上是可以跑一個真正的留言區的，只是不能走 Embed Code 那個看起來就是為它準備的元件。那個元件是從 Wix 網域下發的沙箱 iframe，而一個要先確認自己身在哪個網站、還要請訪客用 Google 登入的小工具，在裡面讀到的來源不是你的，於是就停在那裡。走得通的那條路是 放在 Body - end 的 Custom Code：載入器，再加上幾行把掛載元素造出來、掛到你指定容器底下的程式碼。Custom Code 要求網站已發佈而且接上網域，所以付費的 Wix 方案就是入場券。

先過方案這一關

Wix 從來沒寫過「自訂程式碼需要 X 方案」這句話。它寫的是另外兩句，加起來就是這個意思。開發者文件說，自訂程式碼要跑起來，網站必須已發佈而且接上網域。說明中心說，要接自己的網域，得先買網域，再買一個 Wix 的網站方案。所以免費的 wixsite.com 網站用不了 Custom Code：面板看得見，程式碼就是不執行。

不過也不需要更高的等級。Wix 列出 Light、Core、Business 和 Business Elite，並且寫著 "All plans allow you to have a custom domain"，所以最入門的那一檔就已經過關。Light 是這串名單裡的入門檔，說的是它在名單上的位置，不是價格上的判斷：本文查到的那幾個說明頁面上，Wix 沒有列出任何金額，還說明進階方案的價格因地區而異，所以照價格幫等級排序，這篇文章沒辦法誠實地做。關卡是自訂網域，而每個付費方案都帶一個。Wix Studio 的網站照同樣的邏輯走另一套 Studio 等級。真正的數字請在自己的帳戶裡看，那裡的價格是按你所在的地區標的。順帶一提，繁體中文的說明頁把方案名也譯了過去（Light 寫成「細體」，Business 寫成「商務」，Business Elite 寫成「高級商業」），本文一律用英文原名。

你要裝的到底是什麼

小工具本身就在這個頁面上跑著。想看完整的一圈，隨手貼一則試試。掛對了位置，它在 Wix 頁面上長得一模一樣，因為到那時它不過是你網站上的一個 div。

預覽

2 則評論

新增評論…
以 Alex 身分留言發佈
  • M
    Maya2 小時前

    真的一行就搞定，沒想到安裝這麼簡單！

  • J
    Jordan昨天

    連登入都是共用的，不用再額外接入。👍

帶著範例回覆的一段留言區。Google 登入和控制台裡的審核跟著安裝一起來，不在這段預覽裡。

Embed Code 元件為什麼跑不動它

編輯器有兩個，走到同一個元件的路卻不一樣，所以照著別人的步驟做之前，先認清自己用的是哪一個。在 Wix Editor 裡：新增元件（Add Elements），然後內嵌程式碼（Embed Code），然後熱門內嵌（Popular Embeds），然後內嵌 HTML（Embed HTML），接著輸入程式碼（Enter Code）並套用（Apply）。在 Wix Studio 裡：新增元件，然後內嵌與社交（Embed & Social），然後內嵌程式碼，接著輸入程式碼並套用。帶著內嵌與社交這一組的是 Studio；老的 Editor 把同一樣東西歸在熱門內嵌下面，名字叫內嵌 HTML。這裡的中文面板名照 Wix 繁體中文說明中心的寫法，括號裡是英文介面上的字。不管走哪一條，畫布上都會落下一個方框，你把 HTML 貼進去，HTML 就顯示出來，看起來正是任何「必須待在某個確切位置」的東西該住的地方。

Wix 自己的文件給的是相反的說法：HTML 元件建立的是一個沙箱環境，也就是一個 iframe，它無法直接存取頁面上的其他元件，需要動到頁面其餘部分的小工具在裡面不會運作。在那個方框裡，你並不在自己的網站上，你在一個被畫進你版面裡的 Wix 沙箱來源上。

這對評論小工具來說，是一口氣斷了兩處。它讀 location.hostname，拿去和登記在你 site id 名下的網域比對，這正是別人沒辦法把你的嵌入碼搬到自己站上的原因。在 iframe 裡，那個主機名稱屬於 Wix，比對就過不去。Google 登入另外還要驗證發出請求那個頁面的來源，而來源是沙箱，不是你的網域。兩條都補不了。沙箱存在的意義，恰恰就是讓裡面的程式碼沒辦法自稱是你的頁面。

失敗是安靜的，這才是會賠掉你半天的地方。編輯器裡不會紅。已發佈的網站上是一個空框，或者一個彈出來又關上、訪客照樣沒登入的登入視窗。

問題Custom Code，Body - endEmbed Code 元件（HTML iframe）
程式碼在哪裡執行你真正的頁面，在你的網域上Wix 來源上的一個沙箱 iframe
location.hostname 讀出來是你的網域嗎是不是，讀出來是沙箱
Google 登入走得完嗎走得完走不完，來源不是你的
能不能精準擺進版面只能靠腳本，用選擇器可以，直接拖元件
能不能碰頁面的其餘部分可以不行，只有 postMessage 越得過邊界
需要什麼方案帶著已接網域的付費 Wix 方案文件沒寫，免費網站能不能用也沒寫
編輯器或預覽裡看得到嗎看不到，只有已發佈的網站上有看得到，按下套用之後
裝得下託管式評論小工具嗎裝得下裝不下
Wix 把一次普通的小工具安裝拆到兩個功能上，而只有其中一個裝得下它。

各家網站建置工具在這裡並不一樣，這也是同一個小工具每換一個平台就要換一套裝法的原因。Webflow 的嵌入元件沒有沙箱，所以那邊的掛載 div 直接落在頁面上，Webflow 的安裝步驟就是這個故事的簡短版。

真正跑得動的那套裝法

Custom Code 搆得到三個位置：<head>、body 開頭和 body 結尾。沒有一個是「文章正文下面」。所以由腳本自己造一個掛載元素，再把它放到你要的地方。整個訣竅就是這個，加在載入器上大約五行。

  1. 把 Wix 已經替你決定好的那個已接網域登記進來

    在別的網站建置工具上，這一步是選擇題：測試主機還是正式主機，裸網域還是 www，網站回應得了的好幾個地址裡挑一個。Wix 把這道選擇題拿走了，這一次反而幫了忙。自訂程式碼在網站發佈並接上網域之前不會執行，所以打開這項功能的網域，和小工具必須認得的網域是同一個，而且只有一個。到 BootSignal 控制台裡，照網址列上解析出來的樣子把這個主機名稱加進去，www 也照寫，控制台隨即發給你下面那段程式碼要用的 site id。wixsite.com 那個地址不是拿來替代登記的選項：那是自訂程式碼還沒醒過來時你所在的地址。

  2. 在網站管理介面裡打開 Custom Code

    這個面板在網站的管理介面（dashboard）裡，不在編輯器畫布上，而且 Wix Editor、Wix Studio 和 Wix Harmony 的路徑完全一樣。進設定（Settings），在「進階」區段裡找到自訂程式碼（Custom Code），再按右上角的「+ 新增自訂程式碼」。有一點先講：同一篇說明文章，英文版把這個項目歸在 Development & integrations 區段底下，繁體中文版寫的是「進階」，所以認 Custom Code 這個項目本身，比認區段名可靠。

  3. 兩段程式碼貼進同一筆記錄

    載入器和掛載腳本放進同一個文字方塊。把 data-site-id 換成你的 site id，把 TARGET 換成留言區該掛在其下的那個元素的 CSS 選擇器。給這筆記錄取一個以後認得出來的名字，例如 "BootSignal comments"。

    程式碼
    <script src="https://bootsignal.com/bootsignal.js"
        data-site-id="YOUR_SITE_ID" data-lang="zh-tw" defer></script>

<script>
(function () {
  // CSS selector for the element the thread should be appended to.
  var TARGET = '#comments';
  var timer;

  function mount() {
    var host = document.querySelector(TARGET);
    if (!host) return;
    if (host.querySelector('[data-bootsignal="comments"]')) return;
    var el = document.createElement('div');
    el.setAttribute('data-bootsignal', 'comments');
    // One thread per URL. On Wix Blog this is the post slug.
    el.setAttribute('data-thread-id', location.pathname);
    host.appendChild(el);
    // Ask the loader to scan again, in case it already ran.
    if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
  }

  function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }

  // Wix warns its renderer may re-render elements, so watch instead of firing once.
  schedule();
  new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
})();
</script>

  4. 選頁面，也選位置

    在「將程式碼新增至頁面」（Add Code to Pages）底下選「所有頁面」，連以後新建的頁面也算在內；只有部落格需要留言區的話就選「選擇特定頁面」。在「程式碼放置地點」（Place Code in）底下選 Body - 結束，也就是英文介面上的 Body - end。選了所有頁面時 Wix 還多給一個選擇，用它自己的話說，是讓程式碼 "only once per visit, or on each page your visitor opens" 載入。Wix 只把這個選擇寫了出來，沒寫什麼時候該選哪一個，所以把它當成一顆可以轉的旋鈕，而不是一條規則：先從每次造訪只載入一次開始，如果重新開一個頁面時留言區在、從列表點進去時不在，就改成每個頁面都載入，然後重新發佈。

  5. 套用、發佈，再打開線上的網站

    自訂程式碼在編輯器裡不生效，只在已發佈的網站上執行，而且這些程式碼片段不會以元件的樣子出現在畫布上，所以網站上線之前根本沒有東西可看。按套用，發佈，打開真正的網址，捲到你的目標位置。

2025 年 12 月那一層安全措施

還有一件事得和「貼上去、發佈」放在同一口氣裡講，因為它決定貼進去的程式碼到底跑不跑。Wix 的自訂程式碼頁面上掛著這則公告："In December 2025, Wix introduced new frontend security measures for custom code on Wix sites. This means that some code snippets that previously worked may now be blocked until the provider updates them. This change affects all types of custom code, including dashboard custom code, embedded code, and Velo code." 這裡面沒有一句是衝著我們來的，它對每一段被人貼進 Wix 網站的第三方腳本都成立。

公告背後那個開發者頁面列出到底改了什麼。fetch 和 XMLHttpRequest 被換成加固過的版本，用 Wix 的說法是 "Can't be replaced or reassigned"。透過 document.cookie 寫 Wix 的 cookie 會安靜失敗。同網域上的 window.open 回傳一個空物件。前端程式碼在同網域建立的 iframe 會自動被沙箱化，srcdoc 屬性被擋掉。URL、JSON、String、Object、addEventListener 和 removeEventListener、EventTarget 以及 Service Worker 那幾個 API 被鎖住，改不動。setTimeout 和 setInterval 不再收字串當第一個參數。

把這份清單和上面那段程式碼擺在一起看，就看得出它是照著什麼形狀寫的。它建立一個普通的 div，把它接上去，觀察文件，交給 setTimeout 的是一個函式而不是字串。它不替任何全域物件打補丁，也不自己造 iframe。這份清單還是值得留在視野裡：去年還在某個 Wix 網站上跑、今年在同一個網站上不跑了的腳本，第一個要查的就是它；而且不管出自誰手，只要一個小工具去改寫 fetch 或者手寫 cookie，它在這裡的日子就是借來的。

挑一個 Wix 不會改名的選擇器

Wix 會動態產生類別名稱和元素 id，它自己的文件也提醒，衝著這些識別字寫的 CSS 或 JavaScript 可能在網站重新發佈之後失效。#comp-abc123 是一個帶保存期限的選擇器。真要用，就從線上網站的開發人員工具裡複製，並且在每次大改編輯器之後重新核對一次。

更耐久的做法是錨在你自己掌握的內容上，而不是 Wix 掌握的標記上。在留言區該在的位置放一個文字元件，往裡打一串標記文字，再由腳本找到這串文字並把它換掉。這串字元是你的，重新發佈也活得下來，訪客也永遠看不見它。

標記版：把找選擇器那一段換成這個
<script>
(function () {
  // Type this exact text into a Wix text element where the thread belongs.
  var MARKER = '[[comments]]';
  var timer;

  function slot() {
    var all = document.body.getElementsByTagName('*');
    for (var i = 0; i < all.length; i++) {
      var n = all[i];
      if (!n.children.length && n.textContent.trim() === MARKER) {
        return n.closest('[id^="comp-"]') || n.parentElement || n;
      }
    }
    return null;
  }

  function mount() {
    var host = slot();
    if (!host) return;
    host.textContent = '';
    var el = document.createElement('div');
    el.setAttribute('data-bootsignal', 'comments');
    el.setAttribute('data-thread-id', location.pathname);
    host.appendChild(el);
    if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
  }

  function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }
  schedule();
  new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
})();
</script>

這段腳本為什麼是一直看著，而不是只跑一次

關於自己的渲染方式，Wix 寫明了一件事，而這件事塑造了每一次手工掛載："may re-render elements in ways that conflict with direct DOM manipulation, especially during page transitions or viewport changes." 這是廠商在說，你親手掛上去的節點，腳下的地是會動的，而且點名頁面切換就是它動的時刻之一。Wix 在任何地方都沒寫清楚的是：訪客從部落格列表走進一篇文章時，貼進去的程式碼片段會變成什麼樣。上一節第四步那個載入選擇也是用同樣的方式給的，一個選項，不附任何建議。所以誠實的說法是，掛載的時機和掛載的存活，兩樣都沒有對你做出承諾。

所以這段腳本不押注於一次全新的頁面載入，也不押注於 div 會一直待在放它的地方。它是一個觀察者，不是一次性動作：觀察者注意到新的頁面內容，逾時把一連串變動收攏成一次嘗試，而掛載函式在目標裡已經有留言區時提前退出。載入器會替自己掛過的東西打上標記，所以重新掃描不會畫出第二份。data-thread-id 在建立 div 的時候從 location.pathname 讀出來，於是每篇文章自動拿到自己的對話，版型那邊一點事都不用做；而一次把 div 移走的重新渲染，本身就是觀察者聽得見的變動。

在 Wix 之外還要花多少

Wix 按網站方案收你的錢。BootSignal 按已登記網域收費，而在一個 Wix 網站上這兩者是同一個「一」：每個已登記網域每月 $20 或每年 $200。它涵蓋目錄裡全部 38 個小工具，也涵蓋你訂閱之後新加的那些，帳單不會跟著流量動。再多一個 Wix 網站，是控制台裡多一個網域，而不是換一個更大的方案。細節在價格頁。

有一條跟 Wix 有關的網域提醒，它咬人的時候多半是在你測試的時候，而不是安裝的時候。如果你為了檢查成果，用 wixsite.com 那個地址打開已發佈的網站，主機名稱比對不會認這個地址，留言區就一聲不響。那裡什麼都沒壞，那是你登記網域換來的白名單在做它該做的事。請在已接的網域上檢查，訪客本來也只會出現在那個地址上。

這個頁面上找不到競品價格，因為對照表裡一個過期的數字比沒有更糟。備選方案那一欄收著它們，附上出處和核對日期。

在已發佈的 Wix 頁面上放一段留言區

登記已接的網域，在 Body - end 貼一筆 Custom Code 記錄，然後發佈。

同一個載入器把其餘的也一起帶上

其他每一個小工具都重複用你剛貼好的載入器和同一套掛載手法，所以第二個的代價只是把掛載函式複製一份，換一個 data-bootsignal 的值。意見箱在 Wix 上很搭：那些不肯在公開場合發言的人，往往願意私下告訴你點什麼。

預覽
留下你的意見…
傳送

意見箱小工具。安裝的形狀一樣，掛載的值不一樣。更多寫在意見箱頁面。

有一個小工具值得單獨講一句，因為 Wix 網站常常是在賣東西的。社會認同提示只重播你的網站真實擁有的動靜：已經存在你網域底下的留言、表情回應、評分和投票。它造不出俄亥俄州的某位買家，也不會去試。還沒有動靜的時候它什麼都不顯示，這是設計好的行為。

已發佈的頁面上一片空白時

按順序走一遍下面這張單子。Wix 明說了他們不會陪你一起走："We cannot provide support for external codes that were not created or tested by Wix. If you are experiencing an issue with your code snippet, please contact the provider directly." 知道是哪一步斷的，能把這句話變成寄給我們的兩行訊息，而不是一場猜謎。

  1. 你打開的是已發佈的網站嗎？自訂程式碼在編輯器和預覽裡從不執行。
  2. Network 面板裡有 bootsignal.js 嗎？沒有的話，這筆 Custom Code 記錄沒有涵蓋到這個頁面。
  3. 在線上頁面的主控台裡執行 document.querySelector(TARGET)，它回傳元素了嗎？回傳 null 就是選擇器寫錯了，或者 Wix 改了名字。
  4. 主控台裡有沒有關於 site id 或 thread id 缺漏的警告？那表示 div 掛上了，屬性沒掛上。
  5. 網址列裡的網域和登記的那個一致嗎，www 也一致嗎？差一點也算不一致。
  6. 這段一模一樣的程式碼，在 2025 年 12 月之前在這個網站上跑過嗎？Wix 說新的前端安全措施會擋下以前跑得動的程式碼，直到提供方更新它。
  7. 檢查那塊空白：如果你的 div 待在一個 <iframe> 裡面，那表示程式碼貼進了 Embed Code 元件，在那裡它永遠跑不起來。

常見問題

可以直接貼進 Embed Code 元件嗎？
不行。Wix 自己的文件把那個元件寫成一個沙箱 iframe，無法直接存取頁面的其餘部分，而且它是從 Wix 的來源下發的，不是你的。網域比對過不去，Google 登入也走不完。你拿到的是一個空框而不是一則錯誤，所以它才這麼耗時間。
Wix 編輯器和預覽裡看得到留言嗎？
看不到。Wix 說明，自訂程式碼在編輯器裡不生效，只在已發佈的網站上執行，而且程式碼片段不會以元件的樣子出現在編輯器裡。請先發佈，打開線上網址，用瀏覽器的開發人員工具去看。這件事沒有編輯器內的預覽可用。
我的 Google Analytics 代碼從 Custom Code 也一直沒觸發，是同一個原因嗎？
不是，那一條是寫明的例外，既不是沙箱，也不是安全措施擋的。Wix 說明，Google Analytics、Google Tag Manager 以及 Facebook 和 TikTok 像素這類追蹤腳本不透過自訂程式碼運作，它們要走 Wix 自己的行銷整合。評論小工具不是追蹤腳本，從 Body - end 的那筆記錄裡正常執行，所以一個不動的分析代碼並不能證明這個面板壞了。
每篇部落格文章怎麼各自拿到自己的對話？
腳本在建立 div 的時候用 location.pathname 給 data-thread-id 賦值，於是每個文章網址自動成為一段獨立的對話。以後改了文章網址，它的對話還留在舊路徑上，所以在累積大量留言之前，先把網址結構定下來。
這會替一個 Wix 頁面本來的載入量增加多少？
載入器標籤帶 defer，不擋渲染，而且只有在頁面上找到掛載元素時才去取留言模組。掛載腳本是幾十行，帶一個會把連續變動收攏起來的觀察者。沒有東西是白來的，不過這比一個普通 Wix 頁面上的圖片輕。
Wix 頁面上露出來的 site id 算機密嗎？
不算，也不可能算。Wix 提醒，注入的程式碼任何看得到頁面原始碼的人都看得見，任何前端嵌入都是如此。保護 site id 的是網域白名單：小工具只在登記給它的網域上回應，所以抄走的程式碼片段在別處什麼也做不了。真正的 API 金鑰仍然不該出現在 Custom Code 片段裡。
登記 Wix 網域，拿到 site id

一個主機名稱要登記，一筆 Custom Code 記錄要貼。把兩者接起來的就是 site id。

數據來源