网站JavaScript实现的WhatsApp图标消失，如何恢复显示？

云上老周

2026-8-14

解决WhatsApp图标消失问题

你当前使用的是第三方服务whatshelp.io的插件实现WhatsApp图标，图标消失的核心原因大概率是该第三方服务的脚本资源失效、地址变更，或是被浏览器拦截加载。以下是具体排查和修复方案：

一、先排查第三方脚本的加载问题

打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面后搜索init.js，查看该脚本的加载状态：如果显示404或加载失败，说明第三方服务的资源已不可用。
切换到「控制台」标签，若出现WhWidgetSendButton is not defined这类错误，同样说明脚本未正确加载。

二、替换为无依赖的原生实现（推荐）

第三方服务稳定性不可控，建议直接实现一个不依赖外部脚本的固定图标，效果和原插件一致且更稳定：

1. 插入HTML代码

在页面的</body>标签前添加以下代码：

<a href="https://wa.me/+9000000000" class="whatsapp-float" target="_blank">
  <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/whatsapp.svg" alt="WhatsApp" width="48" height="48">
  <span class="whatsapp-tooltip">Merhaba, Size nasıl yardımcı olabilirim?</span>
</a>

2. 添加CSS样式

在你的CSS文件中加入以下样式，实现右下角固定悬浮效果：

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  text-decoration: none;
}

.whatsapp-tooltip {
  display: none;
  position: absolute;
  right: 60px;
  bottom: 12px;
  background-color: #25d366;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.whatsapp-float:hover .whatsapp-tooltip {
  display: block;
}