网站添加WhatsApp的Icon图标并跳转到在线聊天的官方页面入口，有多种方式，Wordpress有第三方插件，公司自己技术团队开发的独立站也有各种自己配置的方式，一般都是通过监听来源页面的 URL 参数的方式实现。
条条大路均可通罗马，不同的方式都可以实现需求。祥助分享一下我们团队自写的一个很迷你简化的WhatsApp展示方式，js代码部分也只有4行左右，可简单追踪访客点击聊天发起的来源页面，省去安装第三方插件的负载。大家感兴趣可以收藏使用。
Footer添加
WhatsApp的显示按钮一般显示在网站右下角，所以我们的思路可以走将代码添加到全局的Footer Template内的方式。
这里以我的测试站点的Elementor页面构建器为演示，其他构建器基本大同小异（可查看主题或页面构建器的官方指南文档）。
后台左侧-Template-Theme Builder-Footer，编辑网站的全局页脚模块① 添加HTML代码：在页脚的容器末尾位置添加一个HTML元素并复制插入如下HTML部分代码：
<!--
作者：为主的祥助
原理：js获取当前页面的url，然后赋予修改到whatsapp按钮的链接指向，写入url结构的text后面的内容
无需额外安装插件显示whatsapp图标，并且自动识别点击whatsapp的来源页面url
-->
<div><a href="" class="whatsapp-btn" id="whatsappLink" target="_blank">
<!-- WhatsApp官网的SVG-->
<svg class="whatsapp-svg" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.255 3.713a8 8 0 0 0-5.684-2.36c-4.433 0-8.043 3.603-8.043 8.036 0 1.394.364 2.771 1.045 3.974l-1.164 4.26 4.354-1.14a8.06 8.06 0 0 0 3.8.957c4.434 0 8.044-3.61 8.044-8.043 0-2.145-.84-4.172-2.352-5.692zM4.283 13.11c-.76-.863-1.18-2.312-1.18-3.72a6.467 6.467 0 0 1 6.46-6.46 6.42 6.42 0 0 1 4.568 1.891 6.42 6.42 0 0 1 1.892 4.568 6.467 6.467 0 0 1-6.46 6.46c-1.258 0-2.596-.404-3.562-1.06l-2.343.609z" fill="#fff"></path>
<path d="M11.748 10.434c.182.064 1.148.539 1.346.641.198.103.333.15.38.23.048.08.048.475-.119.934s-.95.879-1.33.934c-.34.048-.768.072-1.242-.079a12 12 0 0 1-1.125-.412c-1.979-.854-3.27-2.842-3.364-2.976-.103-.143-.8-1.069-.8-2.035s.507-1.448.689-1.646a.72.72 0 0 1 .522-.246h.38c.12 0 .285-.047.444.34.166.396.562 1.362.61 1.465a.38.38 0 0 1 .015.349c-.063.134-.095.213-.198.324a8 8 0 0 1-.293.348c-.095.095-.198.206-.087.404.119.198.507.84 1.093 1.362.752.673 1.385.879 1.583.974s.309.079.428-.048c.118-.135.49-.578.625-.776s.261-.166.443-.095z" fill="#fff"></path>
</svg>
</a>
<script>
// 页面加载，动态生成url
window.onload = function() {
const currentUrl = window.location.href;
const message = `Hi, I got your WhatsApp information from ${currentUrl}, I'd like to know more details about products.`;
const whatsappUrl = `https://api.whatsapp.com/send/?phone=86你的手机号码&text=${encodeURIComponent(message)}`;
document.getElementById('whatsappLink').href = whatsappUrl;
};
</script></div>
一定记得修改你的手机号码到86后面！一定记得修改你的手机号码到86后面！一定记得修改你的手机号码到86后面
②添加Css代码： 点击这个HTML元素-Advance-Custom CSS，复制插入如下样式代码：
.whatsapp-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #00DB40;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
z-index: 1000;
}
.whatsapp-btn:hover {
background-color: #00b833;
transform: scale(1.1);
}
.whatsapp-svg {
width: 32px; /* 比外层容器尺寸更小 */
height: 32px;
fill: white;
}
前端演示
WhatsApp的按钮图标默认显示在网站右下角，鼠标悬浮时会有一个小的放大动画，点击后即可跳转到WhatsApp的即时聊天入口（调用安装的APP/客户端）或进入网页版聊天。如果你的网站右下角本身有其他图标，可以修改之前css部分的这2个位置参数，往上进行微调，避免重叠遮挡。
bottom: 20px;
right: 20px;
访客点击WhatsApp按钮后，打开的页面会如下图呈现，灰色框内显示的内容即携带了来源页面的url（访客是从哪个页面点击whatsapp按钮触发的），这样我们收到的聊天消息也会携带这个来源url内容，就知道了客户是访问了什么页面（关于，产品，OEM，解决方案等），聊天的时候稍微有个准备。
访客选择打开应用（调用微软商店安装的whatsapp客户端，或手机浏览器调用发起whatsapp APP）或点击chat on web，都可以发起聊天。之后我们在WhatsApp收到的聊天消息就会带这个对方点击的发起页面的url了
温馨提示
- 如果页面构建器不支持对该模块设置自定义css，该css代码也可以在Wordpress后台-外观-自定义区域插入。
- 如果是非WP类站点，也是一样的思路去添加，让全局页面可显示，css部分通过main.css或主css文件添加。
- 后续若有修改更新的版本，可访问网盘下载新的html文件，从内复制对应的代码：
https://pan.baidu.com/s/5p8XXDcUU_S2lapIvd8klMQ - WhatsApp发起聊天界面了，要显示上图头像的话，请设置WhatsApp Business账号的头像，以及头像的可见权限设置为全部人。
- 浏览器的语种设置为英文，重新启动后打开无痕模式，点击按钮跳转的页面也会显示英文，可做测试观察用
如果大家有独立站的建站需求和SEM/SEO培训陪跑的需求，欢迎扫码下方名片，随时联系祥助！
祥助团队开发和打磨至今的Mageseo CMS（魔法师SEO建站营销系统），采用前后端分离模式开发，您可以完全根据自己的喜好来自定义一套属于自己的前端库非常适合SEOer以及设计师，前端开发和建站公司使用。
- 系统前端基于bootstrap 5框架深度定制，去除了不必要的组件，极大的精简前端代码，以保持前端的性能。
- 利用属性式配置取代javascript编程式交互，你几乎无需编写任何javascript代码，即可实现网站效果所需绝大多数功能。
- 非Saas，数据和所属权完全自由，可以打包带走到任意服务器。
- 我们会给您做100%的定制建站，完全按客户的行业方案，业务逻辑来规划站点风格和页面呈现，设计的页面是符合访客的搜索意图，满足访客的搜索需求。我们会分析产品的行业，关键词，同行，去洞察客户的搜索意图。
