网站WhatsApp按钮：正确添加且不干扰浏览

在印度尼西亚，许多买家更喜欢直接聊天，而不是填写表单。因此，您想在网站上放一个 WhatsApp 按钮是很自然的。问题在于，随手加上的按钮往往会帮倒忙：在手机上挡住其他按钮、打开错误的号码，或者让网站变慢。

本文介绍如何添加 WhatsApp 按钮，让买家方便联系您，同时不影响他们浏览网站的体验。

WhatsApp 按钮是表单的补充，而不是替代

聊天适合快速提问：库存、尺寸、运费，或者只是确认您的公司是否还在营业。但并非所有 B2B 买家都愿意聊天。大公司的采购部门通常需要有记录可查的渠道，例如电子邮件，或可以转发给上级的询价表单。

所以两者都要提供：想要快速沟通的用 WhatsApp 按钮，需要正式渠道的用表单和邮件。让买家自己选择。

网站上的 WhatsApp 按钮本质上就是一个“点击聊天”（click to chat）链接。根据 WhatsApp 帮助中心的说明，格式是 https://wa.me/ 加上国际格式的完整电话号码，不要包含开头的零、括号或短横线。

对于印尼号码，这意味着要把开头的 0 换成国家代码 62。例如号码 0812-xxxx-xxxx 应写成 https://wa.me/62812xxxxxxxx。不要使用加号。

WhatsApp 还支持通过 ?text= 参数预填消息。利用这一点，您的团队可以立即了解咨询背景。例如，某个产品页面上的按钮可以预填“您好，我想咨询一下[产品名称]”。买家在发送前仍可修改这条消息。

还有几点：

右下角的悬浮按钮很常见，也容易辨认。但在手机屏幕上，它经常挡住重要的东西：表单的“提交”按钮、底部菜单或 Cookie 提示栏。

保持小巧。一个便于点按的圆形图标就足够了。WCAG 2.2 无障碍指南规定，AA 级的触控目标最小为 24 × 24 CSS 像素。实际上，很多按钮会做得比这更大，方便手指点按。
与屏幕边缘和其他元素保持距离。在手机上逐页检查，尤其是带表单的页面。
不要自动弹出聊天窗口。Google 将遮挡用户查看页面内容的元素称为“干扰性插页”，并建议改用小横幅。页面打开几秒后自动弹出的聊天窗口，正属于这种干扰。
添加清晰的文字标签。在电脑端，在图标旁加上“通过 WhatsApp 聊天”这样的简短文字，可以帮助不太熟悉的用户。

添加 WhatsApp 按钮有两种方式。一种是带图标的普通链接：轻量，不从第三方加载任何内容。另一种是第三方聊天插件，会显示对话窗口、客服头像和动画。

第三方插件会加载额外的脚本。Google 的 web.dev 指南指出，第三方脚本可能会拖慢网站速度。如果只是为了打开 WhatsApp，普通链接就足够了。如果确实需要插件，请在安装前后分别测量网站速度。同时检查插件是否会在手机屏幕上多出一个与其他按钮重叠的图标。

按钮再好，如果没人回复也是白搭。添加按钮之前，请确认：

有专人负责回复，并安排好休假期间的替补人员。
写明工作时间：放在按钮附近或联系页面上，让买家知道何时可以得到回复。
用好 WhatsApp Business 的功能。WhatsApp Business 应用提供自动问候语（发给首次联系您的客户）、离开消息，以及用于常见问题的快捷回复。快捷回复最多可保存 50 条。

如果团队不一定做得到，就不要承诺“5 分钟内回复”。诚实的工作时间比经常落空的承诺更可信。

如果您的网站使用 Google Analytics 4 并开启了增强型衡量（enhanced measurement），点击指向其他域名的链接会被记录为 click 事件。由于 WhatsApp 链接指向 wa.me，点击这个按钮也会被记录。这样您就能看出哪些页面带来的聊天最多。

另一个简单的方法是：每个页面使用不同的预填消息。销售团队一看就知道这条聊天来自产品页、联系页还是文章。

好的 WhatsApp 按钮在买家需要之前几乎感觉不到它的存在；一旦点击，聊天就能带着清晰的背景直接到达合适的人。

如果安装各种插件后网站变得沉重，请阅读企业网站速度慢的原因。想权衡聊天工具和社交媒体的作用，请参阅B2B 企业该重视网站还是社交媒体。希望网站在所有设备上都有整洁的联系按钮？请查看我们的网站建设服务。