WhatsApp 小部件 HTML 代码:免费复制粘贴代码段(2026)

从最简单的 wa.me 链接到完整的浮动按钮,可直接复制粘贴的 WhatsApp 小部件 HTML 代码,以及仅靠原始代码时你还需要自己搭建的部分。

HTML 代码编辑器显示 WhatsApp 小部件代码段,旁边是浮动聊天按钮预览

如果你搜索的是真正的 HTML 代码,这就是它,无需注册:

<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>

将 15551234567 替换为你的号码,采用完整的国际格式:国家代码在前,不带加号、无空格、无前导零。仅凭这一个链接,就足以打开与你的企业的 WhatsApp 聊天。这也是对”给我 HTML 小部件代码”这个问题最诚实的完整答案,因为从这里往后的一切,都是你(或一个生成器)在搭建这一行代码没有覆盖的部分。

添加预填充消息

访问者点击链接时,输入框里什么都没有。添加 text 参数,就能让聊天打开时消息框中已经有一条等待发送的消息:

<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
  Chat with us on WhatsApp
</a>

这条消息必须经过 URL 编码:%20 是空格,%2C 是逗号,%27 是撇号。先写出你想要的句子,再用任意 URL 编码工具处理一遍,然后粘贴到 text 的值里,因为查询字符串中间如果出现未编码的空格或标点符号,在某些浏览器上会导致链接失效。

把它变成一个浮动按钮

大多数人说”WhatsApp 小部件”时,指的并不是一个文字链接。角落里的按钮,其实就是在同一个链接上叠加了 CSS:

<a
  href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
  target="_blank"
  rel="noopener"
  aria-label="Chat on WhatsApp"
  style="
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  "
>
  <svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
    <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
  </svg>
</a>

这个版本通过将电话/聊天图标以 SVG 形式内联,省去了单独的图标文件,所以它真正是一个自包含的代码块:粘贴到 </body> 之前,不需要再上传任何其他内容。但它仍然留下了四件需要你手动处理的事,而这正是真正的生成器能派上用场的地方。

这段 HTML 无法为你做到的事

移动端和桌面端的行为并不一样,而这段代码里没有任何东西能控制这一点。 在安装了 WhatsApp 的手机上点击 wa.me 链接,会直接打开应用。没有安装应用,则会把访问者送去应用商店,你无法从链接本身配置任何回退消息或替代联系方式。在桌面浏览器上,它会在新标签页中打开 web.whatsapp.com,这只有在访问者已经在该浏览器中登录了 WhatsApp Web 时才有效,否则他们看到的就是一个没有任何说明的二维码。这三种结果都来自同一个 href。你无法用纯 HTML 检测接下来会发生哪一种,也无法拦截它。

预填充消息存在于 URL 里,而不是某个表单字段中。 想要更改它,你就得重新手动编码一个新字符串,找到粘贴了这个链接的每一个页面,如果你没有共享模板,还得逐个替换。

没有可以直接替换的图标文件,除非手动编辑 SVG 路径,也没有办法在不直接、逐行修改内联样式块的情况下重新定位、调整大小或更改按钮颜色。

这里没有任何东西能在聊天打开之前捕获潜在客户信息。 链接(或按钮)一旦被点击,就会直接跳转到 WhatsApp。如果你想在对话开始前获取一个姓名和联系原因,那就需要另外搭建一个表单,自己接好逻辑,并想办法把这些信息传入 text 参数。

生成的版本

WhatsApp 聊天小部件生成器是一款免费工具,能把同样这几项设置转化为一个脚本标签,而不是一段需要你自己维护的 CSS。设置你的号码、选择一个颜色、设置位置和偏移量、写一条问候语,并可以选择启用一个聊天前表单(一个简短的问题,邮箱或电话可标记为必填或选填),在 WhatsApp 窗口打开之前先收集背景信息。该工具会输出这样的代码:

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#128C7E"
  data-position-vertical="bottom"
  data-position-horizontal="left"
  data-offset-vertical="24"
  data-offset-horizontal="24"
  data-z-index="999"
  data-greeting="Hi! Ask us anything."
  data-prechat="true"
  data-prechat-title="Before we chat"
  data-prechat-description="Tell us what you need help with."
  async
  defer
></script>

每一项设置都是一行上一个带标签的 data- 属性,所以更改问候语或把按钮移到另一个角落,只需要从表单中重新复制这个标签,而不必在 CSS 文件里翻找。图标、定位逻辑、移动端与桌面端的深层链接处理,以及聊天前表单,全都存在于标签所指向的托管脚本中,这正是上面那段原始 HTML 如果不靠你自己编写就无法做到的。

完整属性参考

如果你正在粘贴一个生成的代码段,并想在手动修改之前了解每一行控制的是什么,以下是这个标签接受的全部属性:

属性	控制内容
`data-widget-id`	生成器分配的唯一 ID,请勿编辑
`data-whatsapp-number`	目标号码,国际格式,不带 `+`
`data-color`	按钮背景色,任意十六进制值
`data-position-vertical`	`top` 或 `bottom`
`data-position-horizontal`	`left` 或 `right`
`data-offset-vertical` / `data-offset-horizontal`	与该边缘的像素距离
`data-z-index`	堆叠顺序,如果有其他固定元素覆盖了按钮,请提高这个值
`data-greeting`	预填充的消息文本,无需手动进行 URL 编码
`data-prechat`	设为 `true` 可在聊天打开前显示一个简短表单
`data-prechat-title` / `data-prechat-description` / `data-prechat-question`	显示在聊天前表单上的文案

两种版本应该粘贴在哪里

无论是原始 HTML 还是生成的脚本标签,都粘贴在同一个位置:某个在每个页面上都会渲染的地方,理想情况下是紧挨着 </body> 之前。

纯 HTML 网站:你的共享页脚模板,如果没有的话,就逐个页面单独添加。
WordPress:一个自定义 HTML 块,或通过外观 → 主题文件编辑器编辑主题页脚。
Shopify:通过在线商店 → 主题 → 编辑代码,粘贴到 theme.liquid 中,紧靠 </body> 之上。
Wix:设置 → 自定义代码,并设置为在所有页面加载。
Webflow:项目设置 → 自定义代码 → 页脚代码。

常见问题

原始 HTML 链接需要 WhatsApp Business 账户吗? 不需要。个人 WhatsApp 号码和 Business 号码一样,都能配合 wa.me 链接使用。像目录或自动回复这样的 Business 专属功能,并不属于链接本身的一部分。

为什么我的按钮显示的是损坏的图片,而不是图标? 这是因为 HTML 引用了一个外部图标文件(<img src="/whatsapp-icon.svg">),而该路径下并没有上传对应的文件。上面的内联 SVG 版本完全避免了这个问题,因为图标是直接写在 HTML 里的。

我可以把小部件 HTML 放在 <head> 标签里吗? 严格来说,锚点标签本身需要在 <body> 中渲染,因为 <head> 中的内容不会显示出来。脚本可以从 <head> 加载,但把代码段放在紧靠 </body> 之前,可以避免阻塞渲染,也是大多数建站工具默认预期的模式。

一个页面能添加的 WhatsApp 小部件数量有限制吗? 没有什么能阻止你粘贴两个,但堆叠在同一个角落的两个浮动按钮,看起来通常更像是一个 bug,而不是一个功能。如果你需要两个号码(比如销售和支持),请给每个按钮分配不同的位置,而不是让它们重叠。

在 Squarespace 上效果是一样的吗? Squarespace 的代码注入面板(位于设置 → 高级)接受这两种版本的方式,和 WordPress 的自定义 HTML 块一样,页脚注入可以在一个地方把它应用到整个网站。

底线

WhatsApp 小部件真正的 HTML 代码,就是一个 <a href="https://wa.me/..."> 标签,现在你已经拿到它了。要把它变成人们通常想象中那种浮动的、有品牌感的、能捕获潜在客户的按钮,要么自己编写并维护 CSS 以及各种深层链接的边界情况,要么让WhatsApp 聊天小部件生成器一次粘贴就输出完成的脚本标签,免费,无需账户。