跳转到正文
OmniChannels.ai
菜单

免费工具

网站 WhatsApp 聊天按钮

几分钟内为任意网站添加悬浮 WhatsApp 按钮。设置号码、预填消息、颜色、位置、问候语和延迟，在桌面或移动预览中实时查看，然后复制一小段独立代码，并按 WordPress、Shopify、Wix 和纯 HTML 的安装步骤操作。

免费 · 无需注册 · 在浏览器中运行

号码和消息

按本地拨号方式输入，或以 + 或 00 开头。空格、连字符和括号均可。

会显示在客户的输入框中，客户可在发送前修改。阿拉伯语、表情符号和换行会自动为您编码。

按钮设置

位置

此颜色上的白色图标对比度为 2.0:1，低于图标建议的 3:1。它仍有可访问名称，但更深的绿色更易辨认。

显示在按钮旁；访客可在本次访问的剩余时间内关闭它。留空则不显示气泡。

供屏幕阅读器朗读，并在鼠标悬停时作为提示显示。

显示设备

0 表示立即显示。稍作延迟可避免与页面的主要行动号召争夺注意力。

实时预览

您的嵌入代码

请输入有效的 WhatsApp 号码以完成代码。

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>你好 👋 有什么可以帮您？</span><button type="button" class="ocwa-x" aria-label="关闭">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=%E4%BD%A0%E5%A5%BD%EF%BC%81%E6%88%91%E5%AF%B9%E4%BD%A0%E4%BB%AC%E7%9A%84%E7%BD%91%E7%AB%99%E6%9C%89%E4%B8%AA%E9%97%AE%E9%A2%98%E3%80%82" target="_blank" rel="noopener" aria-label="在 WhatsApp 上与我们聊天" title="在 WhatsApp 上与我们聊天"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

自包含：约 3.9 KB，不依赖外部脚本、字体或图片，不使用 Cookie。

如何安装

  1. 1复制上方代码。
  2. 2安装 WPCode 等页眉页脚代码插件；如果使用区块主题，也可以打开“外观 → 编辑器”。
  3. 3将代码粘贴到页脚（body 末尾）区域，或页脚模板部分的“自定义 HTML”区块中。
  4. 4保存，清除缓存插件的缓存，并用手机测试。

聊天都堆在一部手机上？ 在共享的团队收件箱中回复这些聊天

您在此输入的任何内容都不会发送到我们的服务器。

简短回答

WhatsApp 聊天按钮是网站上的一个小型悬浮按钮，点击后会打开与企业的 WhatsApp 对话。它本质上是 https://wa.me/ 加企业号码和可选预填消息构成的链接，以图标形式显示在页面角落。访客无需填写表单，也无需保存号码，直接在自己的手机或 WhatsApp Web 上发起对话。

值得信赖的基础设施Meta 官方 Business Solution ProviderGoogle RBM 合作伙伴GSMA 成员ISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type II符合 GDPR

如何在网站上添加 WhatsApp 按钮

  1. 1

    输入号码和消息

    选择国家，输入您的 WhatsApp 号码，并写下访客将发送的消息，例如关于订单的咨询。

  2. 2

    设置按钮样式

    选择所在角落、颜色、问候气泡、适用设备和延迟时间。实时预览会在示例页面上展示桌面和移动端的按钮效果。

  3. 3

    复制代码

    复制代码片段。它只有几 KB 的 HTML、CSS 和 JavaScript，不含外部请求、Cookie 或追踪。

  4. 4

    粘贴到 </body> 之前

    按 WordPress、Shopify、Wix 或纯 HTML 的步骤操作并发布，然后在手机和电脑上测试按钮。

生成的代码做了什么

代码会在页面底部角落添加一个固定定位的链接。该链接是 WhatsApp 在其帮助页面（faq.whatsapp.com/5913398998672934）中记载的标准「点击聊天」URL：https://wa.me/ 加上完整的国际号码，如需要还可附带 ?text= 和经 URL 编码的消息。它在手机上打开 WhatsApp 应用，在电脑上打开 WhatsApp Web 或桌面应用。

一切都内联在代码中：WhatsApp 图标是 SVG 路径，样式限定在单一类名前缀下，脚本只有寥寥几行，用于处理延迟和可关闭的问候语。没有外部脚本、字体、图片或 Cookie，因此按钮不会拖慢页面，也不会引入第三方追踪器。

无障碍与从右到左排版的设计

悬浮按钮往往只有图标，让读屏用户无从判断用途。生成的链接带有您可自定义的 aria-label（默认为「通过 WhatsApp 与我们聊天」）、供键盘用户使用的可见焦点轮廓，以及对辅助技术隐藏的装饰性图标。问候语带有一个有独立标签的真实关闭按钮。

将设备设为减少动态效果的访客看到的按钮没有滑入动画和悬停放大。问候语使用自动文本方向和逻辑 CSS 属性，因此阿拉伯语等从右到左的文字能正确排版，从右到左的网站还可以把按钮放在左下角。

  • 链接可通过键盘访问，并具有清晰的无障碍名称。
  • 遵循 prefers-reduced-motion 设置。
  • 打印时隐藏，并可按设备类型选择是否显示。
  • 关闭问候语的操作在本次访问内被记住，且不使用 Cookie。

如何选择颜色、位置和时机

在从左到右的网站上，右下角是惯例，阿拉伯语网站则常适合放在左下角，但请确认按钮不会遮挡 Cookie 横幅、聊天机器人入口或移动端结账栏。WhatsApp 绿色（#25D366）辨识度极高，搭配白色图标的对比度约为 2:1；如果无障碍最重要，#128C7E 这样更深的绿色约为 4:1。

延迟几秒再显示，可以让访客先阅读页面；当团队用手机回复时，只在移动端显示也是合理的选择。问候语保持一句简短而具体的话即可，例如「关于配送有疑问？来跟我们聊聊。」

官方 Chat on WhatsApp 按钮与品牌规范

WhatsApp 还提供绿白配色、三种尺寸的官方「Chat on WhatsApp」按钮，并要求企业原样使用。据 WhatsApp 帮助中心说明，它目前仅提供英文版。本工具生成的悬浮图标按钮则是另一种更紧凑的形式；无论使用哪种，都不要修改 WhatsApp 标志本身，也不要暗示 WhatsApp 为您的企业背书。

当一部手机不够用时

网站按钮会让进线对话迅速增多。在 WhatsApp Business 应用中，对话保存在数量有限的关联设备上。在 WhatsApp Business Platform（API）中，同一个 wa.me 链接可以接入共享的团队收件箱：对话分配给客服，先由聊天机器人或 AI 客服应答，并在 24 小时客户服务窗口关闭后用已审核的模板跟进。

请规划好由谁应答、在哪些时段应答以及响应速度。如果无法全天候覆盖对话，请在问候语中注明回复时间。

网站 WhatsApp 按钮常见问题

如何在网站上添加 WhatsApp 按钮？

在上方填入号码和消息生成代码，复制后粘贴到网站结束标签 </body> 之前，或网站搭建工具的页脚代码区域。按钮随后会出现在每个页面上。

这个 WhatsApp 聊天组件免费吗？

免费。生成器和代码均免费，无需账号，也没有使用限制。按钮直接链接到 WhatsApp，背后没有订阅，也没有托管脚本。

WhatsApp 按钮会拖慢网站吗？

不会。代码只有几 KB 的内联 HTML、CSS 和 JavaScript，访客点击之前不会发起任何网络请求，这与会加载外部脚本、字体和追踪器的组件不同。

如何在 WordPress 中添加 WhatsApp 按钮？

使用 WPCode 之类的页眉页脚代码插件，把代码片段粘贴到页脚部分；如果使用区块主题，则添加到页脚模板中的自定义 HTML 区块。清除缓存后再测试。

如何在 Shopify 中添加 WhatsApp 按钮？

在 Shopify 后台依次打开 Online Store、Themes，在当前主题上选择 Edit code。打开 layout/theme.liquid，将代码粘贴到 </body> 之前，保存后在手机上检查店铺。

可以只在手机上显示 WhatsApp 按钮吗？

可以。在生成器中取消勾选「桌面」，按钮会在宽度 768 像素及以上的屏幕上隐藏。也可以取消勾选「移动」，仅在桌面显示。

多位客服可以通过网站按钮回复对话吗？

单靠一部手机效果不佳。请将号码接入 WhatsApp Business API，并把对话路由到共享的团队收件箱，让多位客服和聊天机器人共同应答同一个号码。

更多免费工具