首頁›指南›Webflow 網站小工具清單：從留言到電子報，共用一個載入器

Webflow 網站小工具清單：從留言到電子報，共用一個載入器

按你想在頁面上促成什麼事來排，不是按小工具的名字排。

Mr. Latte
更新

能不能在 Webflow 頁面上放東西，卡的是兩件事，其中只有一件是技術問題。先是付費方案：自訂程式碼和 Code Embed 元素都要有 Core、Growth、Agency 或 Freelancer 其中一種 Workspace，或者站點上有生效中的 Site plan。技術的那一半是，發佈出去的 Webflow 站自己不跑任何程式，所以每一個會動的東西都得以 script 標籤的形式進來。過了這道門，機制就無聊得很舒服：Site settings 裡放一個 BootSignal 載入器，全站的小工具都靠它，所以你加第二個小工具的成本是一個 <div>，沒有別的了。這一頁是照你想讓小工具替你辦成什麼事來排的，不是照小工具的名字。

先過方案這一關

Webflow 在兩篇說明文件的開頭印了同一個要求，一篇講站台和頁面的自訂程式碼，一篇講 Code Embed 元素：你要有 Core、Growth、Agency 或 Freelancer 其中一種 Workspace，或者站點上有生效中的 Site plan。它的 pricing 對照表從另一邊講同一件事：Custom code 那一列，在免費的 Starter site plan 和免費的 Starter Workspace 兩欄都是一槓。

所以最省的進場方式，是替那一個站買付費的 Site plan，或者買付費的 Workspace。2026 年 8 月 25 日，在 webflow.com/pricing 上切到年繳的檢視，Basic site plan 標的是每月 $15，Core Workspace 是每月 $19，而 Core 的功能清單裡點名了自訂程式碼。免費帳號上沒有半套可以先試：那些欄位不在畫面上。

一個載入器，之後第二個小工具只值一個 div

載入器放在 Site settings 的 Custom code 分頁、Footer code 區。Webflow 會把這一區放在每一頁收尾的 </body> 之前，而且特別建議 script 標籤放在 footer。按 Save changes，之後你每一次發佈它都跟著出去。

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

整套安裝的 script 標籤就這一個。它之後的東西全是標記：打開 Add 面板，把 Code Embed 放到小工具該待的位置，貼上一個帶 data-bootsignal 屬性的 div，存檔關掉彈窗。落地頁上的一個倒數計時就只有這麼多，第十個小工具長得也一樣。

放在頁面上的一個 Code Embed
<div data-bootsignal="countdown"
     data-target="2026-12-31T23:59:59"
     data-expired="The sale has ended!"></div>

收費也是同一個形狀，排版之前先知道比較好。註冊一個網域是每月 $20，或每年 $200，這一行就涵蓋整個目錄，包括你訂閱之後才加進來的小工具。裡面沒有任何東西在數瀏覽數或訪客數，所以打算放三個小工具而不是一個，數字也不會動。第二個網域是另外一筆，從控制台加，其餘的細節在價格頁。

有一個結構上的細節對 Webflow 有利：Code Embed 把你的標記放進頁面本身，不是放進沙箱化的 iframe。小工具拿 location.hostname 去比對你 site id 底下註冊的網域，Google 登入則看頁面的來源。有些網站建置工具只給沙箱化的 HTML 嵌入，小工具看到的是那家的沙箱網域而不是你的，於是拒絕執行。Webflow 不是那一種。把上線的網域註冊起來，如果你會先測，就連 .webflow.io 預備網域一起註冊，這一關就過了。

當你想讓讀者回你一句

文章有立場，或者在解釋一套步驟，評論才站得住，因為讀者正是在這種地方會想補一句更正或一個問題。訪客用 Google 登入，而這個登入在所有 BootSignal 小工具之間共用。放在集合頁上時，整套安裝只是改一次範本：步驟在 Webflow 評論小工具那一篇，小工具本身是評論。

評分適合另一種頁面：訪客是在給一個東西下判斷，而不是在跟人討論。一份範本、一道食譜、一個課程單元。它收到的東西也會餵給評價牆，那面牆的卡片是拿小工具真的存下來的評論做出來的，所以它變不出沒有人寫過的句子。評分要一個 thread id，因為分數屬於那個項目，不屬於整個網站。

當賣點是一個日期

倒數計時要嘛誠實，要嘛只是裝飾。如果報名真的週五截止，或者價格真的午夜換，那個計時器講的就是真話，頁面也因此讀起來更急。data-target 放 ISO 時間戳，data-expired 放歸零之後頁面該說的話，那句話在時鐘走完之前沒人會看。安裝步驟在 Webflow 倒數計時小工具那一篇。

預覽
07天12時30分45秒

一個真的在走的倒數計時，也就是 Webflow 的 Code Embed 會畫出來的同一個東西。

社會認同提示是急迫感的另一半，而且它刻意比別家賣的假造版本弱。它重播的是你網站上真實發生過的近期動態，也就是 BootSignal 已經存下來的評論、表情回應、評分和投票，它沒辦法憑空生出一筆俄亥俄州的訂單，因為根本沒有欄位讓你打字進去。所以在還沒有人用過的網站上，這個提示沒有東西可以顯示。它屬於背後已經有一些動靜的頁面。

當頁面很長，人讀到一半就走

有兩個小工具從兩端回答同一句抱怨。閱讀進度條是頂上一條細橫條，訪客往下移動它就往前填，不用拖捲軸也知道還剩多少。目錄拿頁面上已經有的標題自己長出來，並把正在讀的那一段標亮，長篇指南或文件頁要的就是這個。兩個都不收 thread id，因為兩個都不存東西。

預覽
☰ 目錄
快速開始設定常見問題

目錄，從標題長出來的。放在 Webflow 上，它讀的就是你在 Designer 裡排出來的那些標題。

分享按鈕會放在這一組，理由樸素得多：手寫的分享連結會爛掉，而且要等到某個按鈕貼出一張空白頁，才會有人發現。分享小工具是一個元素，瀏覽器有原生分享面板時就交給它，沒有的時候就複製連結。

當你在收 email

電子報是這裡唯一一個 Webflow 使用者可能已經有原生答案的小工具，因為 Webflow 的表單就能收地址、存下送出的內容。差別在地址落在哪裡。電子報小工具把訂閱者跟你其他的 BootSignal 資料放在一起，不要求訪客登入，而且收 data-thread-id，所以一個站上可以同時跑部落格訂閱和候補名單，不必做兩份表單。

收不收 thread id

這是 Webflow 使用者最常弄錯的地方，因為 Webflow 讓錯的那個版本特別好做。在集合頁範本的 Code Embed 裡，你可以把 CMS 欄位直接放進屬性值，這個直覺大概有一半的時候是對的。會替某一頁存東西的小工具收 data-thread-id，而且需要那個綁定；只讀自己所在頁面的小工具不理它。整站寫死同一個值，所有文章就共用同一段對話。

小工具收不收 data-thread-id綁到什麼上
評論收CMS 裡的文章 slug，讓每篇文章各留各的對話
評分收被評分的那個項目，通常就是同一個 CMS slug
電子報收一份名單一把鑰匙，例如 blog 或 waitlist
倒數計時器不收什麼都不綁。日期寫在 data-target 裡
閱讀進度條不收什麼都不綁。它量的是自己所在的那一頁
目錄不收什麼都不綁。它讀頁面上已經有的標題
分享按鈕不收什麼都不綁。它分享目前的網址
社會認同提示不收什麼都不綁。它重播你其他小工具存下來的動態
規則一句話說完：會替這一頁存東西的小工具收 thread id，只讀自己所在頁面的不收。

這條規則也管得到沒列在這一頁上的小工具。投票、留言板、推文、表情回應、瀏覽計數和意見回饋都留著逐頁的資料，所以收 thread id。公告橫幅、Cookie 同意、燈箱、相簿、圖片對比、放大鏡、翻牌字、心智圖、評價牆和特效則不收。

把第二個小工具接到同一個載入器

一份訂閱涵蓋 38 個付費小工具，另外還有 33 個完全不用安裝的免費瀏覽器工具。

Designer 讓你看到什麼，又藏起什麼

  • 裝著 <script> 標籤的 Code Embed，在 Designer 畫布上只會顯示一個佔位。Webflow 在那裡只預覽 <iframe> 和 <style> 的內容，其他一概不預覽；script 要等你 preview、發佈或匯出才會跑。
  • Webflow 說自訂程式碼在 preview 模式就會生效，但要等網站發佈之後才會真的上線。小工具再加一個條件：它只在你 site id 底下註冊過的主機名稱上回應，而 preview 不是從你的網域送出來的。可信的測法是發佈出來的網址，包括預備網域。
  • 每一個自訂程式碼欄位可以放 50,000 個字元：Site settings 的 head 和 footer、Page settings 的 head 和 before-body，還有每一個 Code Embed。一行載入器離那個天花板遠得很，這也正是 Webflow 建議用 src 載入的原因。
  • 不要把 <html>、<body> 或 <head> 標籤貼進自訂程式碼；Webflow 警告這會把你的版面弄壞。這裡每一個掛載點都只是一個普通的 div，所以不會遇到。
  • 新發佈的 Webflow 站已經帶著 jQuery 3.5.1，Webflow 也提醒再來第二份會造成衝突。這裡沒有任何東西會再加一份。

合理的第一輪

  1. 把你要發佈的網域，連同 .webflow.io 預備網域一起註冊，然後複製 site id。
  2. 把載入器貼進 Site settings、Custom code、Footer code，就這一次。按 Save changes。
  3. 替第一個小工具加一個 Code Embed；如果它該出現在每篇文章上，就加在集合頁範本上。
  4. 發佈，打開上線的網址，確認這一個會動，再去加第二個。
  5. 其餘的都用 div 加上去。沒有第二個載入器，也沒有第二份訂閱。

有東西畫不出來，就把這張清單倒著走一遍：主機名稱註冊了沒、網站發佈了沒、嵌入是放在頁面裡而不是 head 裡、表格說要 thread id 的地方給了沒。這四項幾乎涵蓋所有情況。如果你還在比較各家代管廠商，而不是在決定自己的頁面需要什麼，替代方案那一區有列出價格的對照。

常見問題

載入器可以放 Page settings，不放 Site settings 嗎？
可以。Page settings 有同一組兩個欄位，一個在 head 標籤裡，一個在收尾的 body 標籤前面，而且 Webflow 會把頁面層級的程式碼排在全站自訂程式碼後面。剛好只有一頁需要小工具、你又希望另外四十頁什麼都不載入時，頁面層級是誠實的選擇。等到第二頁也想要，就把載入器搬到 Site settings 的 Footer code，維護一份就好，不用每頁一份。兩邊的欄位都能放 50,000 個字元，一行載入器連零頭都用不到。
我規劃了八個小工具，是要放八支 script 嗎？
不是。不管你掛幾個小工具，頁面載入的都是同一個載入器，第一個之後的每一個都是標記，不是又一次為了第二套程式庫發出的網路請求。載入器帶著 defer，所以不擋畫面；Webflow 把 script 標籤指向 Footer code、又建議放進 head 的外部 script 加 async 或 defer，理由是同一個。真正讓你付出代價的是擺放位置：首屏上面一個沉重的相簿，份量遠遠超過這個載入器。
費用是按小工具算，還是流量變大就變貴？
兩者都不是。BootSignal 是每個註冊網域每月 $20 或每年 $200，所有小工具都含在裡面，之後才進目錄的小工具也含在裡面。價格裡沒有任何一項綁著瀏覽數或訪客數。要多加網域，在控制台另外買。
社會認同提示可以顯示假的購買通知嗎？
不行，而且這是設計上的決定，不是還沒做的功能。它只重播你的網站透過 BootSignal 小工具真的產生過的動態：評論、表情回應、評分和投票。沒有欄位可以讓你捏造一筆事件，所以全新的網站在真的有人留下痕跡之前，它沒有東西可以顯示。
怎麼讓每一篇 CMS 文章有自己的評論和評分？
在集合頁範本的 Code Embed 裡，把 data-thread-id 綁到一個 CMS 欄位，通常是文章的 slug。改一次範本，每篇文章就有自己的一串對話和自己的分數。上面表格裡寫「不收」的那些小工具完全不用綁；替倒數計時或分享按鈕加一個 thread id，什麼事都不會發生。
可以把 Code Embed 變成 component 重複使用嗎？
Webflow 可以把 Code Embed 轉成 component，對上面表格裡「不收」的那些小工具來說，這是一次把閱讀進度條或目錄放上三十頁的乾淨做法。要留意「收」的那一欄：component 存在的意義就是把一模一樣的標記送到每一個地方，所以直接打進去的 thread id，會讓三十頁共用同一串對話。評論和評分要的是集合頁範本加上綁到 CMS 欄位的 id，一樣是改一次就好，但不會併成一串。
如果我把網站程式碼匯出，搬到別的地方架呢？
自訂程式碼會跟著走。Webflow 說 script 在你 preview、發佈或匯出之後就會生效，所以匯出來的站還是帶著載入器和那些掛載用的 div，位置跟你留下的一樣。有一件事會變，而且正是會安靜壞掉的那一件：小工具只在你 site id 底下註冊過的主機名稱上回應，所以在你翻標記找 bug 之前，先把最後真正對外服務的網域註冊起來。
去讀 Webflow 的安裝指南

每一篇都把一個小工具從空白頁帶到發佈，Webflow 的選單路徑一步一步寫出來。

數據來源