在 Webflow 上加倒计时，卡住的多半是时间戳

自定义代码是 Webflow 的付费功能

Webflow 的两篇相关帮助文档，开头写着同一个条件：你有 Core、Growth、Agency 或 Freelancer 之中的一种 Workspace，或者站点上挂着生效中的 Site plan，那么 Site managers 和 Designers 就能添加自定义代码和脚本。讲 Code Embed 元素的那一篇把这句话原样又写了一遍。pricing 的对照表从反面说同一件事：custom code 这一行，在免费的 Starter site plan 和免费的 Starter Workspace 里是空的，从 Basic site plan 和 Core Workspace 起才有。

所以解锁的路子有两条：给马上要上线的这一个站点买付费 Site plan，或者买一份把你以后所有作品都罩住的付费 Workspace。这两笔都不进 BootSignal 的口袋。而且 Starter 站点上没有先试一口的办法，因为那几个输入框不是变灰，是压根不在界面上。

先看它真的走一遍

它画在 shadow root 里面，这一点在 Webflow 上比在手写的站点上更要紧。你站点的全局样式钻不进去改数字的长相，小部件的 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 出于加载速度，建议脚本标签就放在这里，也就是收尾的 body 标签前面。整套安装要的脚本只有这一个；倒计时具体怎么走，全在下一步写到元素上的属性里。

   代码复制

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-cn" 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. publish 之后，在发布出来的地址上验

   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 内容，不用再约那位握着 Workspace 席位的人开 Designer、重发一遍站点。

两笔账单，只有一笔是我们的

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 预览和 Webflow 的 preview 地址都不是你的域名，先发布到预发或正式地址。
• 刚发布就显示结束文案：目标时间没能解析。照 ISO 的写法把时间戳核对一遍，日期和时间之间的 T 也别漏。
• 结束时刻差了一小时：夏令时。写目标日期当天生效的偏移量，不是你敲字那天生效的那个。
• Designer 画布上摆着一个占位方块：正常。那里只预览 iframe 和 style 的内容。
• 预发上好好的，接上自定义域名之后不动了：新主机名也要登记。判定看的是主机名，不是 Webflow 站点。
• Code Embed 一声不吭地拒收你粘的东西：Webflow 不收自定义代码里的 html、body 和 head 标签，每一栏还有 50,000 字的上限。

不管这个页面是围着什么建的，把截止时刻同时写进正文，用文字写，把时区说出来。“周五晚上 11:59（KST）关门”是访客能记进日历的那一部分，也是时钟归零之后唯一还说得通的那一部分。