跳至主要内容

免费工具

网站 WhatsApp 按钮

选好号码、颜色和位置,把代码粘贴到网站上即可。

示例
在消息里附上访客所在页面
外观
样式
颜色
位置
20 px
问候
预览
对话框里预先填好

在上方填写有效号码后,即可在 WhatsApp 中测试按钮。

把代码粘贴到每个页面的 </body> 之前。 查看各平台的做法

客户来消息后,看看如何跟进 →

各平台的安装方法

HTML 网站

在每个页面的 </body> 之前粘贴代码。如果各页面共用同一个页脚,粘贴在页脚里一次即可。

WordPress

最简单的是免费插件 WPCode:在 插件 > 安装插件 中安装,然后打开 Code Snippets > Header & Footer(WPCode 的菜单仍是英文),把代码粘贴到 Footer 框里,点 Save Changes。使用 Elementor Pro 的话,在 Elementor > 自定义代码 中选择放在 <body> 末尾,条件选 整个网站。WordPress.com 需要付费套餐才能添加代码。

Wix

在 Settings > Development & integrations > Custom Code 中点 + Add Custom Code,粘贴代码,选择 All pages 和 Body – end,再点 Apply(Wix 没有简体中文的帮助文章,这里按英文界面写)。Wix 只在已发布且连接了自有域名的网站上运行自定义代码,这需要 Premium 套餐。

Shopify

在 在线商店 > 模板 中打开模板的 … 菜单,选择 编辑代码。打开 layout/theme.liquid,把代码粘贴到 </body> 之前,点 保存。付费模板购买后才能编辑,更新模板会清除这项修改。

Google Sites

无法添加悬浮按钮:Google Sites 没有给所有页面加代码的地方,嵌入的代码也只停留在所在的区块里。点击下方的“复制链接”,把链接放在页面的按钮或文字上。链接只包含号码和消息;要附上访客所在的页面,需要使用网站代码。

WhatsApp 链接生成器 →

检查是否生效

在手机和电脑上打开已发布的页面(不是编辑器)。点击按钮,核对号码和消息,并确认它没有挡住 Cookie 提示或其他按钮。

您可能想了解这些。

免费吗?有水印吗?

免费、无需注册,也没有水印。号码和消息只在您的浏览器里处理,不会发送给 WAWin。

代码会拖慢网站或收集访客数据吗?

不会。它不使用 Cookie,不向任何人发送访客数据;除了您在聊天窗口里填的头像图片,也不加载任何外部文件。选择气泡时,一段很短的脚本会在 3 秒后显示气泡;访客关掉后,在关闭标签页之前不会再显示。

气泡和聊天窗口有什么不同?

气泡是按钮旁的一句话,3 秒后出现,点它就打开 WhatsApp。聊天窗口和常见的网站聊天挂件一样,访客点按钮时打开,显示您的名称、头像和问候语,再点里面的按钮开始对话。两种方式的对话都在 WhatsApp 里进行。

访客点击后会发生什么?

在手机上,WhatsApp 会打开并填好消息,访客只需点发送。在电脑上,会打开一个 WhatsApp 页面,可以继续用 WhatsApp Web 或电脑版应用。

以后怎么改号码或颜色?

在这里重新生成按钮,用新代码替换旧代码。代码不依赖 WAWin:即使这个页面不在了,按钮也照常工作。

点击会出现在 Google Analytics 里吗?

如果网站使用 Google Analytics 4 并开启了增强型衡量功能,按钮的点击已经会作为指向 wa.me 的出站点击记录下来,不需要改代码。点击只记录了打开 WhatsApp 的尝试,不能确认对话已打开或消息已发送。

按钮挡住了 Cookie 提示或网站上的其他聊天窗口。

调大底部距离把按钮往上移,或者换到另一侧。

WAWin:接住网站带来的对话

在 WhatsApp Web 里用快捷回复和 AI 草稿回复,并把每位客户的备注和标签放在对话旁边。