Webflow 的倒數計時：安裝很短，時區要坐下來想

自訂程式碼是 Webflow 的付費功能

Webflow 在兩篇相關的說明文件開頭寫著同一個條件。你有 Core、Growth、Agency 或 Freelancer 其中一種 Workspace，或者你的站點有生效中的 Site plan，那麼 Site managers 和 Designers 就能加自訂程式碼和 script。講 Code Embed 元素的那一篇，這句話一字不差地又寫了一次。在 pricing 的對照表上，Custom code 那一列標成免費的 Starter site plan 和免費的 Starter Workspace 不含，從 Basic site plan 和 Core Workspace 往上才含。

所以解鎖的路有兩條：替你正要上線的這一個站買付費的 Site plan，或者買一份罩住你所有作品的付費 Workspace。這兩筆都不是 BootSignal 收的。而且 Starter 站點上沒有先試一口的辦法，因為那些欄位不是變灰，是不存在。

先看它跑一遍，再貼任何東西

它畫在 shadow root 裡面。這件事在 Webflow 上比在手寫的網站上更有感：你在 Designer 排的全域樣式伸不進去改數字的長相，小工具的 CSS 也溢不出來動你的版面。它會讀身後的背景，自己挑淺色或深色的一套跟上頁面，而 data-accent 收任何 CSS 顏色值，數字就能換成品牌色。

載入器進 Footer code，時鐘進 Code Embed

1. 先想預備網域：沒註冊過的主機名稱，它一個數字都不畫

   Webflow 的發佈對象有兩種，Publish 視窗裡也是分開列的：專案建立當天就給的 your-project.webflow.io 預備位址，以及你後來接上的自訂網域。倒數計時在畫出第一個數字之前會先讀 location.hostname，發現這個主機名稱沒註冊就停在那裡，所以你發佈到哪一個，那一個就得先進控制台。從預備位址開始比較順手，因為計時器正是你最想搶在客戶前面盯著看一分鐘的那種小工具，等網域上線那天再把正式主機名稱加進去。存一個網域會拿到一個 site id，全站小工具共用這一串短字串，它要填在哪裡，第二步會說。

2. 把載入器貼進 Site settings

   進 Site settings，打開 Custom code 分頁，把載入器放進 Footer code 區，按 Save changes。Webflow 為了載入速度，建議 script 標籤就放這裡，也就是收尾的 body 標籤前面。整套安裝要的 script 只有這一個：倒數計時做的每一件事，都寫在下一步那個元素的屬性上。

   程式碼複製

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

3. 倒數計時該坐哪裡，Code Embed 就拖到哪裡

   打開 Add 面板，把 Code Embed 拖到畫布上計時器要出現的確切位置，貼上掛載元素，存檔關掉彈窗。之後想改，雙擊這個元素就會再打開。順手在這一步定下來：時鐘走完之後，頁面上要留一句什麼話。

   程式碼複製

   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="The sale has ended!"></div>

4. 發佈之後，在發佈出來的網址上檢查

   Webflow 說自訂程式碼的效果在 preview 模式看得到，但你 preview 的那個頁面是從 Webflow 的網址送出來的，不是你註冊的網域，所以計時器在那裡不會畫出來。發佈到預備網域或正式網域，改開那個位址。

把結束時刻寫成你真正想要的那一刻

真正會出事的是這裡。data-target 由瀏覽器的日期解析器讀，而它有一條大家很少料到的規則：結尾沒有時區的時間戳，算的是訪客那台機器上的時間，不是你的。照最順手的寫法寫下去，跨年倒數會在首爾的 23:59:59 歸零，九個小時後在倫敦再歸零一次。

<!-- Local: 23:59:59 on whatever clock the visitor is using -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59"></div>

<!-- Fixed: one instant for everyone, written in UTC -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59Z"></div>

<!-- Fixed: the same instant as the line above, written in Seoul time -->
<div data-bootsignal="countdown" data-target="2027-01-01T08:59:59+09:00"></div>

照這個截止時刻實際上是什麼意思來挑。不管顧客住哪裡、到當地午夜就打烊的店，要的是本地那一種。產品發表、票券開賣、大家該一起看著歸零的線上講座，要的是把時區寫明。這裡偏移量比時區名好用，因為它撐得過日光節約時間：寫目標日期那天生效的偏移量，不是今天生效的那個。

還有兩個小陷阱。像 2026-12-31 這種只寫日期的值，看起來像是當地午夜的簡寫，其實不是：沒有時間的部分，解析器按 UTC 午夜算，落到訪客那邊可能是下午，也可能是前一天晚上。另外數字是照著裝置時鐘往下減的，筆電時間快了兩天的訪客，看到的剩餘時間就短兩天。跑在瀏覽器裡的計時器修不了這一條。

歸零那一刻，沒有東西會憑空消失

目標時間過了之後，數字會就地換成 data-expired 裡的文字。元素保住原本的框，頁面不會因為時鐘留下的洞而重排。屬性不寫，小工具就退回自己內建的訊息，語言看 data-lang 設成什麼。

那句話會一直留到有人去改頁面，所以寫一句下星期還成立的。「春季梯次報名已結束，下一梯三月開放。」放一個月後再讀，比凍在原地的「快，今晚就截止」耐看得多。還有一個行為值得先知道，免得你去查錯地方：如果瀏覽器根本解析不了 data-target，小工具會在載入的當下就顯示結束訊息。一個全新的計時器在你發佈的瞬間就秀出結束那句話，那是時間戳寫壞了，不是日期已經過去。

倒數計時會讀的每一個屬性

最後那一列，就是這次安裝和 Webflow 評論小工具那一篇的差別。評論、評分和投票需要 data-thread-id，好讓一頁的資料和下一頁分開。倒數計時沒有資料，所以同一頁上放好幾個，也不過是好幾個目標時間不同的掛載元素，那一個載入器會把它們全部找出來。

把日期交給 CMS，發表就不用等 Designer

在 Collection page 範本上，目標時間不必是寫死的字面值。Code Embed 可以在屬性裡吃 CMS 欄位的值，於是一份範本就變成你以後會發佈的每一個發表頁、活動頁和報名截止頁。

在集合裡加一個純文字欄位，名字取成 Countdown Target 之類的，裡面存完整的 ISO 時間戳，時區結尾也寫上。然後打開範本上的 Code Embed，游標放進 data-target 的引號裡，從欄位選單插入那個欄位。

<div data-bootsignal="countdown"
     data-target="[Countdown Target]"
     data-expired="Enrollment for this session has closed."></div>

Designer 會把插入的欄位畫成一個有顏色的標記，不是上面那串方括號文字，那串只是用來標位置的。用純文字欄位，不要用日期欄位：日期欄位會照你挑的顯示格式輸出，而解析器比人挑剔。不管你選哪一種，開一篇發佈出來的項目確認數字真的在減，而不是顯示你寫的結束那句話。

好處在於誰有權移動一個日期。欄位一旦帶著時鐘，把發表延後一週就是改一筆 CMS 項目，不是開一次 Designer，再由握著 Workspace 席次的人整站重新發佈一次。

兩張帳單，只有一張是我們的

Webflow 收的是解鎖自訂程式碼的方案費。BootSignal 收的是每個註冊網域每月 $20 或每年 $200，這一份訂閱涵蓋倒數計時、公告橫幅和目錄裡其餘的東西：今天是 38 個付費小工具，加上之後才進來的，再加上 33 個免費的瀏覽器工具。裡面沒有任何一項按瀏覽數計費，所以一個落地頁被電子報帶爆，花的錢跟前一天一模一樣。會讓帳單動的是你留著幾個註冊主機名稱，所以上線之後還留著預備位址的專案，是在付兩份。

如果你正拿它跟那些價格隨流量或活動數量往上爬的計時器工具比較，替代方案那一區有列出價格的對照。

時鐘說的是還剩多久，不是什麼要結束了

倒數計時本身只是一個沒有句子的數字。多數發表頁上，它會配一條把那件事講清楚的橫幅；既然載入器已經在你的 Footer code 裡，那就只是再放一個 Code Embed 的事。

<div data-bootsignal="announce"
     data-message="Early-bird pricing ends Friday"
     data-link="/pricing" data-link-text="See plans"
     data-id="launch-1"></div>

它也不收 thread id。data-id 只是一把關閉用的鑰匙：讀者把橫幅關掉，這個選擇記在他自己的瀏覽器裡，而你把 id 換一個，橫幅就會為了下一則公告再出現。

幾乎都是主機名稱或時間戳

• 什麼都沒畫出來：頁面不在註冊過的網域上。Designer 的 preview 和 Webflow 的 preview 網址都不是你的網域，先發佈到預備網域或正式網域。
• 一發佈就顯示你寫的結束訊息：目標時間解析不了。照 ISO 的形狀對一次時間戳，包括日期和時間之間那個 T。
• 結束時間差了一小時：日光節約時間。寫目標日期那天適用的偏移量，不是你打字當下生效的那個。
• Designer 畫布上坐著一個佔位方塊：正常。那裡只預覽 iframe 和 style 的內容。
• 預備網域上好好的，接上自訂網域之後就不動了：新的主機名稱也要註冊。檢查的是主機名稱，不是 Webflow 的站。
• Code Embed 安靜地不吃你貼的東西：Webflow 不收自訂程式碼裡的 html、body 和 head 標籤，而且每一欄上限 50,000 個字元。

不管頁面是為了什麼做的，把截止時間也用文字寫進文案裡，時區講明。「報名週五 11:59pm KST 關閉」是訪客可以放進行事曆的那一部分，也是時鐘歸零之後唯一還說得通的那一部分。