对于我们做外贸和跨境电商的朋友,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即时聊天按钮,那是通过插件或者一些服务或者代码完成,通常有一定的限制和技术,不适合新手,这里就不展开说了。
版权声明:本文原创文章,首发于青松跨境B2C,版权所有,未经允许,请勿转载!
转载请注明:如若转载,请先取得同意,然后注明原文链接,写点东西谁也不容易。