Webflow 內建的留言訪客看不到，公開留言要另外接

Webflow 有留言功能，但不是這一個

Webflow 本身就有一套留言功能，所以查這個題目常常會查歪。那套東西住在 Designer 裡，是給做網站的人用的：設計師在某個區塊留一句話，客戶回一句，處理完就標記解決。這些都到不了發佈出去的頁面，讀你部落格文章的訪客一句也看不到。

公開留言是另一回事，裡面有三件 Webflow 沒有解決的事：知道寫的人是誰、把寫下來的東西留住、讓你把不該留的刪掉。CMS 存的是你自己寫的內容，Forms 收到的東西只有你讀得到。這兩個都不算對話。

先讀一段真的在跑的留言串

其他都先放著，先看你的方案

兩半各自該去哪裡

載入器和掛載元素放的地方不一樣，搞混是最常見的第一次失敗。載入器管全站，位置在 Site settings 的 Custom code 分頁、Footer code 欄位，Webflow 會把這一欄放在每一頁收尾的 </body> 之前。Webflow 建議 script 標籤放這裡而不是 Head code，免得拖慢載入；真的得放進 head 的外部 script，它建議加 async 或 defer，所以下面那一行帶著 defer。掛載元素則是看位置的，放在 Code Embed 元素裡，拖到版面上留言串該坐的地方。

1. Webflow 給你兩個主機名稱，兩個都要註冊

   每個 Webflow 專案在建立當天就會拿到一個 .webflow.io 位址，後來接上自訂網域也不會把它收回去：講 Code Embed 的那篇文件就是叫你拿這個位址當測試和收意見的預備網域，而且 yourdomain.com 上線之後，它還是照樣供著發佈出去的站。所以你手上其實有兩個主機名稱，而小工具只在控制台列著的主機名稱上回應。your-project.webflow.io 不是 yourdomain.com 的子網域，註冊了正式網域不等於連預備網域一起註冊。把兩個都掛在同一個 site id 底下，那串值就是下一步載入器要帶的東西。每個主機名稱在方案裡各算一個網域，所以自訂網域還沒接上的話，先註冊預備位址，等上線那天再把正式的加進去。

2. 載入器只貼一次，全站通用

   Site settings、Custom code 分頁、Footer code 欄位，然後按 Save changes。Webflow 會把這一欄放進它發佈的每一頁，包括你還沒做出來的頁面，所以這個標籤貼一次就再也不用碰。每一欄可以放到 50,000 個字元，載入器這一行連邊都摸不到。

   程式碼複製

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

3. 留言串該坐哪裡，Code Embed 就放哪裡

   打開 Add 面板，在 Collection page 範本的文章內文下面加一個 Code Embed 元素，貼上掛載元素，存檔關掉彈窗。這裡不用再放別的：剛才那個載入器會自己找到這個元素，把內容填進去。

   程式碼複製

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

4. 先發佈到預備網域，在那裡讀留言串

   Webflow 說自訂程式碼的效果在 preview 模式就看得到，這對標籤本身成立，但小工具還多一個條件：它拿頁面的主機名稱去比對你註冊的網域，而 Designer 的 preview 位址屬於 Webflow，不屬於你。發佈到你的 .webflow.io 位址，用一般的瀏覽器分頁打開它。畫布上那個裝著 script 標籤的 Code Embed 會顯示一個佔位方塊，那是正常的，不代表哪裡壞了。

一份範本，每篇文章一串留言

data-thread-id="page-key" 照抄不改，全站每篇文章就共用同一段對話，這通常不是誰想要的結果。這個屬性只是一把鑰匙，把它綁到每篇文章各自不同的東西上，分流就自己發生了。

在 Collection page 的 Code Embed 編輯畫面裡，Webflow 讓你把 CMS 欄位插進程式碼。游標放到 data-thread-id 的兩個引號中間，插入文章的 Slug 欄位。Webflow 會在發佈時換成真正的 slug，所以改一次範本，集合裡每篇文章就各有各的留言串。

小工具帶著什麼一起來

• 巢狀回覆，討論會長成一棵樹，而不是攤成一堆各說各話的紙條。
• Google 登入，所有 BootSignal 小工具共用，剛才為了評分登入過的讀者，要留言時已經是登入狀態。
• 不用再開一組密碼，也不用記，因為整條路上只有 Google 帳號這一種登入。
• 代管的儲存外面包著一份逐網域的允許清單，小工具只在你註冊的網域上回應，別處複製一份你的頁面也叫不動它。
• 從控制台管理：刪掉一則留言，封鎖一個發言的人。
• 介面文字有韓文、英文、日文，用載入器上的 data-lang 切換。

Webflow 站要有留言，走得通的路有三條

如果你是從現有的留言系統搬過來，而不是從零開始，那麼比功能表更該問的是搬遷的事，Disqus 替代方案那一頁把那些問題走了一遍。

這筆錢跟 Webflow 那筆放在一起看

Webflow 的 Site plan 按站點收費。BootSignal 按註冊網域收費，每月 $20 或每年 $200，所有小工具都含在裡面，流量不另外算錢。文章紅了，帳單不動；之後在同一個 Webflow 專案上再加倒數計時器或閱讀進度條，帳單也不動。會讓它動的是主機名稱：預備網域和正式網域是兩個註冊網域，控制台可以一個一個往上加。

載入器已經在了，下一個小工具就是一個 div

目錄裡其他東西全都搭剛才貼的那個 script 標籤。有兩個放在 Webflow 部落格文章上特別划算：

先看主機名稱，再看那兩個 Save 按鈕

1. 瀏覽器網址列上的位址，必須是你註冊過的主機名稱之一。your-project.webflow.io 和 yourdomain.com 是兩筆各自獨立的登記，Designer 的 preview 網址兩者都不是，所以 preview 裡空白、發佈後的頁面有東西，那是它在正常運作。
2. Designer 畫布上出現佔位方塊，對任何裝著 script 標籤的 Code Embed 來說都正常。要判斷裝好了沒有，去看發佈出來的網址。
3. 在發佈出來的頁面上打開瀏覽器的開發人員主控台。沒註冊的主機名稱會在那裡說出來，不會默默失敗，而預備網域正是大家最常漏掉的那一個。
4. 確認載入器裡的 site id 和控制台上的一致，包括複製貼上時多出來的錯字。
5. 確認那段標記是落在 Code Embed 裡，不是落在 rich text 區塊裡；後者會把標籤當成看得見的文字印出來，而不是把它跑起來。
6. 確認你按過 Site settings 的存檔。載入器和嵌入元素在兩個不同的畫面上，存了一邊不等於存了另一邊。