纯前端实现一个可追踪的 WhatsApp 联系组件（含预填消息与来源参数）

做独立站 / 落地页时很多团队会把 WhatsApp 作为主联系入口。但放一个号码和放一个能追踪来源的联系组件是两回事前者你永远不知道客户从哪个渠道来后者能直接回答Instagram 和邮件哪个带来的询盘多。本文用纯前端HTML CSS JS零后端依赖实现一个浮动联系按钮支持点击直接跳转 WhatsApp 官方深度链接wa.me自动预填一段引导语降低客户开口成本通过src参数标记来源配合二维码实现分渠道统计无后端也能把点击事件上报到自己的统计端点。改造成本极低复制即用。一、核心原理WhatsApp 官方提供了wa.me深度链接格式https://wa.me/你的号码带国家码不含和空格?textURL编码后的预填消息加上来源参数只是我们自己的约定不影响打开会话例如srcig表示来自 Instagram。后面统计时按src区分即可。二、完整代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleWhatsApp 联系组件/titlestyle/* 浮动按钮容器 */.wa-float{position:fixed;right:20px;bottom:20px;z-index:9999;}.wa-float a{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;padding:12px 18px;border-radius:30px;font-size:15px;box-shadow:0 4px 12pxrgba(0,0,0,.2);}.wa-float svg{width:22px;height:22px;fill:#fff;}/style/headbody!-- 浮动联系按钮把 src 改成你的渠道标识 --divclasswa-floatahref#data-srchomeclasswa-btnsvgviewBox0 0 32 32pathdM16 .7C7.6.7.7 7.6.7 16c0 2.8.7 5.4 2 7.7L.4 31.6l8-2.1c2.2 1.2 4.8 1.9 7.6 1.9 8.4 0 15.3-6.9 15.3-15.3S24.4.7 16 .7z//svg联系我们/a/divscript// 配置区 constWA_NUMBER8613800000000;// 你的号码国家码号码不含 和空格constWA_TEXT你好我想咨询产品报价;// 预填消息constTRACK_URL/api/wa-click;// 你的统计上报端点可选functionbuildWaLink(src){consttextencodeURIComponent(WA_TEXT);returnhttps://wa.me/${WA_NUMBER}?text${text}src${encodeURIComponent(src)};}document.querySelectorAll(.wa-btn).forEach(btn{constsrcbtn.dataset.src||unknown;// 1) 拼接带来源参数的深度链接btn.hrefbuildWaLink(src);// 2) 可选点击时上报来源用于统计无后端可去掉这段btn.addEventListener(click,(){if(navigator.sendBeaconTRACK_URL){navigator.sendBeacon(TRACK_URL,JSON.stringify({src,ts:Date.now()}));}});});/script/body/html三、怎么做到分渠道追踪同一个组件放在不同地方时只改data-src官网首页data-srchomeInstagram 主页链接data-srcig邮件签名data-srcemail展会二维码data-srcexpo客户点开链接时src会带在 URL 上配合下面任意一种统计方式即可看出渠道效果自己有后端用上面的sendBeacon把点击事件打到/api/wa-click按src聚合无后端把src也写进wa.me链接再配合带点击统计的短链服务后台直接看每个渠道的点击 / 对话数二维码每个渠道生成一张带对应src的二维码图片扫码来源天然可分。四、几个实用增强多入口分流销售 / 客服 / 售后用不同号码时按时间或地区把客户自动分配到对应wa.me链接避免人工搬。聊前收集信息在跳转前先用一张轻量表单收集客户姓名 / 需求线索质量更高注意别拦太多字段2~3 个即可。不想自己维护这类品牌短链 二维码 预填消息 点击统计也能直接用现成的短链工具一站式生成按团队是否需要省事来选。小结一个浮动按钮 wa.me深度链接就让 WhatsApp 联系从不可追踪的号码变成了带来源、带预填、可统计的入口。核心就是三件事链接封装、来源参数、点击事件上报。代码不到 50 行先跑起来再根据数据调渠道预算。