WordPress怎么添加WhatsApp按钮和在线聊天？Joinchat和Tawk.to设置教程

外贸客户很多习惯直接用WhatsApp沟通：先发一句话问价格，再发图片、规格，比填表单、等邮件快得多。给网站加一个WhatsApp入口，能让一部分不愿意填表单的客户联系上你。

本文讲三种做法，从最简单的到最完整的：纯链接按钮、Joinchat悬浮按钮、Tawk.to在线聊天。前两种走WhatsApp，第三种是网页里的实时聊天。

聊天入口是补充，不能代替询盘表单。表单能收集产品、数量、公司等信息，并留下邮件记录，表单怎么做见《WordPress询盘表单怎么做？》。

三种做法怎么选

大多数外贸企业站，用Joinchat就够了。如果团队有人专门在线接待、客户来自多个时区，才考虑Tawk.to。

先做准备：用哪个WhatsApp号码？

• 建议用一个专门的业务号码，而不是个人号码。网站上公开的号码，会被各种人添加和骚扰，也不方便日后换人接手；
• WhatsApp有面向商家的WhatsApp Business应用，可以设置营业时间、自动欢迎语等，具体功能以WhatsApp官方为准；
• 号码要用国际格式：国家区号加号码，不带加号、空格、横线，也不要带开头的0。比如国家区号86的手机号13800000000，要写成8613800000000。

做法一：WhatsApp链接按钮（不装插件）

WhatsApp官方提供「点击聊天」链接，格式是：

https://wa.me/国际格式号码

例如https://wa.me/8613800000000。点击后，手机会打开WhatsApp，电脑会打开WhatsApp网页版或桌面版，直接进入和你的对话。

还可以预填第一句话，在链接后面加?text=和URL编码后的文字：

https://wa.me/8613800000000?text=Hello%2C%20I%20am%20interested%20in%20your%20products

放在哪里：

• 导航菜单：在「外观 → 菜单」里添加一个「自定义链接」，网址填wa.me链接，文字写「WhatsApp」，菜单设置见《WordPress菜单、首页和固定链接怎么设置？》；
• 页面里的按钮：区块编辑器里添加「按钮」区块，链接填wa.me；
• 联系页和页脚：直接放一行文字链接。

产品页上，可以给每个产品页单独写一个预填了产品名称的链接，客户点开就能直接发出带产品名的消息，沟通效率更高。

做法二：Joinchat悬浮按钮

Joinchat是常用的WhatsApp聊天插件。根据官方页面，免费版能做的事包括：

• 在网站上显示悬浮的WhatsApp按钮：手机上打开WhatsApp应用，电脑上打开WhatsApp桌面版或网页版，并显示可扫描的二维码；
• 点击后弹出聊天窗口，可以设置延迟几秒后自动弹出；
• 给页面上任意元素加上#whatsapp或#joinchat链接，点击就打开聊天；
• 欢迎语里可以用动态变量，区块编辑器里也有对应的按钮区块；
• 可以不使用Cookie运行，并与WordPress的隐私政策指南集成，会建议隐私政策里的文字；
• 支持WooCommerce按钮和统计事件。

付费版（Premium）才有的功能，包括：按国家显示或隐藏按钮、Telegram、Messenger等其他渠道、多客服轮换和营业时间设置、没人在线时的备用提示、聊天漏斗等。另外官方还有一个单独的产品Joinchat AI，是用你的网站内容训练的AI客服，需要另外购买。

安装和设置

1. 后台「插件 → 安装插件」，搜索Joinchat，安装并启用；
2. 进入「Joinchat」设置页，在「Phone number」里填国际格式的WhatsApp号码；
3. 写欢迎语：用英文写一句简单的话，比如「Hi! How can we help you?」，不要写太长；
4. 设置按钮的位置、颜色和是否显示延迟弹窗。位置建议放在右下角，如果页面上已经有「返回顶部」按钮或Cookie提示条，要错开，不要叠在一起；
5. 设置「第一条消息」，客户点击按钮后默认发出的内容，比如「Hello, I'm interested in your products. Could you send me a quote?」；
6. 设置显示的页面：产品页、联系页要显示，登录页和购物车页可以不显示；
7. 保存，清除网站缓存，用手机和电脑分别打开网站测试。

在手机上要重点检查

外贸客户很多是用手机访问的：

• 悬浮按钮不要挡住表单的提交按钮、主要的行动按钮；
• 点击后应该能直接打开WhatsApp应用，没有报错；
• 弹窗不要一打开页面就弹出来，客户还没看到内容就被弹窗挡住，体验很差，延迟一些再弹，或者干脆不弹。

做法三：Tawk.to在线聊天

Tawk.to是免费的在线聊天工具。官方页面说明它对客服人数、聊天量、网站数量都不设限，还带有工单和知识库功能，并有iOS、Android、Windows、Mac的客户端。和WhatsApp不同，它是网页里的聊天窗口，访客不需要有任何账号就能和你对话。

安装和设置

1. 先到tawk.to注册免费账号，创建一个网站「Property」和聊天组件（Widget）；
2. WordPress后台安装并启用Tawk.To Live Chat插件；
3. 进入「设置 → Tawk.to」，登录tawk.to账号，选择要显示的Property和Widget；
4. 选择在哪些页面显示，保存；
5. 样式、欢迎语、预聊天表单（让访客先填姓名和邮箱）、离线留言，都在tawk.to自己的后台设置，而不是WordPress里；
6. 也可以用短代码[tawkto]把聊天放到特定页面。

用Tawk.to要想清楚的事

1. 谁来接待、什么时间接待。客户分布在不同时区，半夜来的访客没人回复，体验比没有还差。一定要设置离线时的留言表单，让客户留下邮箱，你上班后再回复；
2. 插件评价不一。官方插件页上有评分，但也有用户反映装完后网站出问题、设置让人困惑、漏掉通知，装之前先备份，装好后测试；
3. 手机App的体验。有用户反映手机端体验一般，上线前自己实际测试一次。

聊天插件对网站的影响

速度

聊天插件会加载第三方脚本，尤其是Tawk.to这类在线聊天。脚本多了，会拖慢INP和LCP。装完用PageSpeed Insights测一次，对比前后，必要时延迟加载或改用纯链接按钮，优化办法见《WordPress网站速度优化指南》。

隐私和Cookie

聊天工具会收集访客的信息。Joinchat官方说明可以不使用Cookie，更适合对隐私要求高的场景；Tawk.to需要在隐私政策里说明用了在线聊天，并看tawk.to自己的隐私文档了解数据怎么处理，面向欧盟、英国的网站，可能还需要Cookie同意提示。具体合规要求建议咨询专业人士。

不要叠在一起

WhatsApp悬浮按钮和在线聊天窗口，不要同时放在右下角。挑一个主渠道：

• 以WhatsApp为主：用Joinchat；
• 以网页实时聊天为主：用Tawk.to，WhatsApp只放在联系页的文字链接里。

怎么统计聊天点击

不统计，就不知道这个按钮有没有用。有两种办法：

1. Joinchat官方说明带有统计事件，可以把点击发送到GA4或GTM；
2. 用GTM的点击触发条件，监听包含wa.me的链接点击，发送事件。

GA4和GTM的安装，见《WordPress怎么安装GA4和GTM？》，里面讲了怎么把事件标成关键事件，这样就能在GA4里看到有多少人点击了WhatsApp、他们是从哪个页面点的。

常见问题

点击WhatsApp按钮，电脑上打不开？

电脑上需要安装WhatsApp桌面版，或者在浏览器里登录WhatsApp网页版。访客没登录的话，会看到二维码，扫码登录后才能聊天。这个是访客那边的限制，不是你的网站出问题。

WhatsApp在国内能用吗？

这取决于你自己的网络环境。网站上的WhatsApp入口，是给海外客户用的，客户那边通常没问题。你自己接待客户需要一个能正常使用WhatsApp的网络，这点要提前确认好，别让客户发了消息你收不到。

WhatsApp按钮和询盘表单，只留一个行不行？

不建议。表单收集的信息更完整，也是留档的邮件记录；WhatsApp更方便快速沟通。两者互补，最好都有。

同一个号码，多人同时接待可以吗？

WhatsApp Business应用和相关的多设备功能，有各自的限制，以WhatsApp官方为准。Joinchat的多客服轮换是付费功能。需要多人接待的话，Tawk.to更合适。

装了聊天插件网站变慢了？

先用PageSpeed对比装前后，如果影响明显，换成纯链接按钮，对速度几乎没有影响。

要不要加AI自动回复？

有AI客服产品，Joinchat官方就有单独的Joinchat AI。AI回复对常见问题有用，但外贸报价、技术细节这类，建议人工回复，AI只做第一轮应答。

总结

1. 外贸客户习惯用WhatsApp，但聊天只是补充，询盘表单要保留；
2. 只要入口：用wa.me链接做按钮，最轻；
3. 要悬浮按钮：装Joinchat免费版，填国际格式号码、欢迎语、预填消息，手机上检查位置；
4. 要网页实时聊天、离线留言、多人接待：用Tawk.to，一定要设置离线留言；
5. 两类聊天入口只选一个主渠道，不要叠在一起；
6. 装完测速，在隐私政策里说明，并用GA4统计点击。

建站上线的整体流程，见《WordPress建站流程和教程汇总》。