首页›指南›Webflow 小部件，按你想办成的事来挑

Webflow 小部件，按你想办成的事来挑

排序的依据不是小部件的名字，是你想在那一页上办成什么。

Mr. Latte
更新

决定一个 Webflow 页面能装什么的关口有两道，只有一道是技术上的。先来的是付费套餐：自定义代码和 Code Embed 元素都要求 Core、Growth、Agency 或 Freelancer 之中的一种 Workspace，或者站点上挂着生效中的 Site plan。技术那一半是，发布出去的 Webflow 站点不跑自己的代码，所以每一个会动的部件都得以脚本标签的形式进来。过了这道关口，机制就无聊得让人放心：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，custom code 写在 Core 的功能清单里。免费账号上没有能试的简化版：那几个输入框不在界面里。

一个加载器之后，第二个小部件只值一个 div

加载器进 Site settings 的 Custom code 标签页、Footer code 那一栏。Webflow 会把这一栏的内容输出在每一页收尾的 </body> 之前，而且专门建议脚本标签放页脚。按下 Save changes，之后你每次发布，它都跟着一起走。

Site settings > Custom code > Footer code
<script src="https://bootsignal.com/bootsignal.js"
        data-site-id="YOUR_SITE_ID" data-lang="zh-cn" defer></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 登录看的是页面的 origin。有些建站工具只给沙箱化的 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 版式里排出来的那些标题。

分享落进这一组的理由更朴素：手写的分享链接会烂掉，而且直到某个按钮把一个空页面发出去，才会有人发现。分享按钮是一个元素，浏览器有系统分享面板就交给它，没有就把链接复制下来。

要收邮箱地址的时候

邮件订阅是这里唯一一个 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 里
阅读进度条不收不绑。它量的是自己所在的那一页
目录不收不绑。它读页面上现成的标题
分享按钮不收不绑。它分享当前的 URL
社会认同提示不收不绑。它重放别的小部件存下的动静
一句话的规矩：会把这个具体页面的东西存下来的小部件收 thread id，只读自己所在页面的不收。

这条规矩对没出现在这一页上的小部件同样管用。投票、留言板、点赞、表情回应、浏览计数和意见箱都留着按页面走的数据，所以收 thread id。公告横幅、Cookie 同意横幅、图片灯箱、图片画廊、前后对比滑块、图片放大镜、翻牌显示板、思维导图、用户评价墙和特效则不收。

把第二个小部件挂到同一个加载器上

一份订阅带 38 个付费小部件，另外还有 33 个连装都不用装的免费浏览器工具。

Designer 给你看什么，又藏起什么

  • 装着 <script> 标签的 Code Embed，在 Designer 画布上只显示一个占位。Webflow 在那里只预览 <iframe> 和 <style> 的内容，别的都不画；脚本要到 preview、publish 或者导出的时候才跑。
  • Webflow 说自定义代码在 preview 模式里就生效，但要等站点发布之后才会上线。小部件再加一个条件：它只在这个 site id 名下登记的主机名上应答，而 preview 不是从你的域名发出来的。靠得住的试法，是登记域名上一个已发布的 URL，预发也算。
  • 每一个自定义代码栏都装 50,000 个字符：Site settings 的 head 和 footer、Page settings 的 head 和 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. 发布，打开正式 URL，确认这一个能用，再去加第二个。
  5. 剩下的用 div 加。没有第二个加载器，也没有第二份订阅。

哪一个没画出来，就把这张单子倒着走一遍：主机名登记了吗，站点发布了吗，嵌入是在页面里而不是在 head 里吗，表上写着要 thread id 的地方给了吗。这四步几乎能盖住全部。要是你还在比不同的托管服务，而不是在定这一页需要什么，替代方案那一栏里有带价格的对照。

常见问题

加载器能放在 Page settings，而不是 Site settings 吗？
能。Page settings 里有同样的一对栏位，一个在 head 标签里，一个在收尾的 body 标签之前，Webflow 会把页面级的代码排在站点级自定义代码后面。只有一页需要小部件，你又不想让其余四十页白读一遍，那页面级是老实的选择。等到第二页也想要，就把加载器挪到 Site settings 的 Footer code，这样要维护的只有一份，而不是每页一份。两种栏位都装 50,000 个字符，一行加载器几乎用不掉多少。
我打算装八个小部件，那是八个脚本吗？
不是。不管挂几个，页面读的加载器还是那一个，第一个之后的每一个都是标记，不是又一次去取别的库的网络请求。加载器带着 defer，不会挡住渲染，这也是 Webflow 把脚本标签指向 Footer code、又建议给非放 head 不可的外部脚本加 async 或 defer 的同一个理由。真正让你付出代价的是摆放：首屏上一个沉甸甸的图集，比加载器重得多。
按小部件个数收费吗？流量涨了会不会更贵？
都不会。BootSignal 是每个登记域名每月 $20 或每年 $200，全部小部件都在里面，以后进目录的也在里面。价格里没有一项跟浏览量或者访客挂钩。要增加域名，在控制台里另外购买。
社会认同提示能显示假的购买通知吗？
不能，而且这是设计上的决定，不是缺功能。这个位置的小部件只重放你站点通过 BootSignal 小部件真实产生过的动静：评论、表情回应、评分和投票。没有可以编造事件的输入框，所以刚建好的站点在真有人用起来之前，它没东西可显示。
怎么让每篇 CMS 文章有自己的评论和评分？
在集合页面模板的 Code Embed 里，把 data-thread-id 绑到一个 CMS 字段上，通常是文章的 slug。改一次模板，之后每篇文章都有自己的话题和自己的分数。上面表格里写着不收的那些不用绑，给倒计时或者分享那一行写上 thread id，什么也不会发生。
能把 Code Embed 变成组件反复用吗？
Webflow 可以把 Code Embed 转成组件。对上面表格里不收的那一侧来说，这是把阅读进度或者目录一次铺到三十个页面上的利落办法。要留神的是收的那一侧：组件存在的意义就是到处输出一模一样的标记，所以直接写死在里面的 thread id 会让三十个页面共用一场对话。评论和评分该走的是集合页面模板，把 id 绑到 CMS 字段上，同样是改一次就够，还不会搅在一起。
把站点代码导出去、放到别处托管会怎么样？
自定义代码会一起出去。Webflow 说脚本在 preview、publish 或者导出的时候渲染，所以导出来的站点里，加载器和挂载用的 div 还在你留下的位置上。变的东西有一个，恰好是会悄悄失败的那个：小部件只在 site id 名下登记的主机名上应答，所以在你去标记里找 bug 之前，先把最后真正用来发布的域名登记上。
去读 Webflow 的安装教程

每一篇把一个小部件从空页面带到发布，Webflow 的菜单路径也一条条写着。

数据来源