如何在网站中添加Whatsapp聊天按钮或者链接

对于我们做外贸和跨境电商的朋友，whatsapp应该用得不少，因为和国外客户联系是真的很方便，假如能放到独立站或者外贸网站上，不管是新老客户看到都能快速联系卖家，这已经很多独立站的标配了。

今天给大家介绍的方法不通过插件和代码就能在网站添加whatsapp聊天按钮，只适应于页眉(页头)或者网页中，应该适合新手们。

在页面中添加Whatsapp按钮

whatsapp作为社交工具，和其他社交工具一样，通常都添加在contact us页面，其实不管在什么页面的任何位置，现在使用wordpress的Gutenberg编辑器，也是页面编辑器都能非常容易的创建任何按钮。

第一步：添加一个按钮区块Block(建议安装Kadence Blocks插件)

比如我们新建一个页面，就叫contact us吧，打开的空白页面就是gutenberg编辑器了。

点击编辑器中的黑色加号➕或者左上角的蓝色加号添加按钮区块，这里建议安装Kadence Blocks插件，然后用advanced Button

我这里直接在空白处添加按钮，是为了方便讲解，实际建立页面不可能一开始就添加按钮，利用此编辑器你可以在任何地方添加按钮区块。

或添加whatsapp图标，也可添加social图标列表

或者同样方式添加whatsapp图标，Kadence Blocks里面有社交图标。

添加按钮后，可以从上百个按钮中添加你想要的图标，kadence blocks的icon区块不仅包含whatsapp，几乎包括任何社交图标。

第二步：编辑按钮或图标

添加好按钮和图标，首先编辑按钮和图标，也就是对按钮和图标进行设置。

编辑按钮

1. 添加按钮文字，可以直接在按钮上输入任何文字，比如Whatsapp Chat

2. 设置按钮图标，按钮上也是可以添加一个图标的，点击按钮区块，看右边区块Block设置，在按钮区块下的Style里面王下拉就有个Icon setting，就可以把图标添加到按钮中

3. 可设置按钮大小和颜色，同样是在右侧block设置中，修改按钮颜色，尺寸大小，边线等等。

设置图标

1. 添加图标后，需要选择需要的图标，这里当然是选择whatsapp的图标了，这里类似上文给按钮选择图标。

2. 设置图标大小和颜色，同样是点击图标，在有些二设置栏中设置图标的各种属性

比如上图就把whatsapp设置成了他们默认的绿色了。

第三步：添加whatsapp链接到按钮或图标

给按钮和图标添加链接，其实是上面设置的延续，只是链接要稍微做个说明，whatsapp的链接是固定格式，都是这个：(http://wa.me/+86…)，+86…是代表国家区号，后面是whatsapp账号的手机号码。

设置按钮的链接也是在右侧栏block设置中：

把你的手机号码添加到上文格式中，然后把链接粘贴在上图的Button Link中，记得点击旁边弯弯的箭头就算添加成功了。

图标链接设置方法一样，找到右侧设置栏中的Link，粘贴以上链接到Link中。

以上方法可适应任何页面，最后添加一个聊天按钮以作示例。

在页眉中添加whatsapp按钮

除了在页面中添加whatsapp按钮之外，在网站的页眉或者说页头添加whatsapp聊天按钮也是很常见的，页眉设置需要可参考此处。

另外通常也看到很多网站在左下角或者右下角添加了whatsapp即时聊天按钮，那是通过插件或者一些服务或者代码完成，通常有一定的限制和技术，不适合新手，这里就不展开说了。