网页上添加 WhatsApp 链接（Click to Chat）

这篇就是把 WhatsApp 官方的 Click to Chat（点一下直接打开聊天）整理成可复制的模板：纯链接、带默认消息、按钮/悬浮按钮、JS 动态生成。你照抄改号码就能用。

结论（先说最常用的）

最省事的两种：

纯链接：https://wa.me/手机号
带默认消息：https://wa.me/手机号?text=消息（URL 编码）

准备：手机号怎么写（最容易错）

WhatsApp 链接里的手机号必须是 国际格式：

只写数字：国家区号 + 手机号
不要加 +
不要空格/短横线

例如：

你的号码是 +86 13800138000
正确写法就是：8613800138000

方法 1：最简单的纯链接（推荐）

直接放一个 <a> 就行：

<a href="https://wa.me/8613800138000" target="_blank" rel="noopener noreferrer">
  点击 WhatsApp 联系我
</a>

说明：

target="_blank"：新标签打开
rel="noopener noreferrer"：顺手加上，避免一些安全/性能问题

方法 2：带默认消息（更像“客服入口”）

链接后面加 ?text=，但注意 中文/空格要 URL 编码。

写死一段消息（适合固定话术）：

<a
  href="https://wa.me/8613800138000?text=%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%88%91%E6%83%B3%E5%92%A8%E8%AF%A2%E4%B8%80%E4%B8%8B"
  target="_blank"
  rel="noopener noreferrer"
>
  WhatsApp 咨询
</a>

更建议用 JS 生成（下面方法 5），不用自己手动编码。

方法 3：做成按钮（不用插件也能很像样）

<style>
  .wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
  }
  .wa-btn:hover {
    filter: brightness(0.95);
  }
  .wa-btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }
</style>

<a class="wa-btn" href="https://wa.me/8613800138000" target="_blank" rel="noopener noreferrer">
  <svg viewBox="0 0 32 32" aria-hidden="true">
    <path
      fill="currentColor"
      d="M19.11 17.3c-.25-.13-1.48-.73-1.71-.81-.23-.08-.4-.13-.57.13-.17.25-.65.81-.8.98-.15.17-.3.19-.55.06-.25-.13-1.06-.39-2.02-1.24-.75-.67-1.26-1.5-1.4-1.75-.15-.25-.02-.38.11-.51.11-.11.25-.3.38-.44.13-.15.17-.25.25-.42.08-.17.04-.32-.02-.44-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44h-.49c-.17 0-.44.06-.67.32-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.02 2.61.13.17 1.78 2.72 4.32 3.82.6.26 1.07.42 1.44.54.6.19 1.14.16 1.57.1.48-.07 1.48-.6 1.69-1.18.21-.57.21-1.06.15-1.18-.06-.13-.23-.19-.48-.32z"
    />
    <path
      fill="currentColor"
      d="M16 3C9.37 3 4 8.37 4 15c0 2.11.55 4.09 1.52 5.81L4 29l8.4-1.47C13.92 28.32 14.95 28.6 16 28.6c6.63 0 12-5.37 12-12S22.63 3 16 3zm0 22.04c-1.02 0-2.02-.18-2.95-.52l-.67-.24-4.98.87.91-4.85-.29-.7c-.53-1.27-.81-2.64-.81-4.07 0-5.74 4.67-10.41 10.41-10.41 2.78 0 5.4 1.08 7.37 3.04 1.97 1.97 3.04 4.59 3.04 7.37 0 5.74-4.67 10.41-10.41 10.41z"
    />
  </svg>
  WhatsApp 联系
</a>

说明：上面这个 SVG 只是当个“绿按钮带图标”的占位；你也可以换成自己站点的图标资源。

方法 4：右下角悬浮按钮（全站都能点）

<style>
  .wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    z-index: 9999;
  }
  .wa-float:hover {
    transform: translateY(-1px);
  }
  .wa-float span {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
  }
</style>

<a class="wa-float" href="https://wa.me/8613800138000" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp 联系">
  <span>WA</span>
</a>

如果你担心遮挡页面右下角的“回到顶部”，就把 bottom/right 改大一点。

方法 5：用 JS 动态生成（推荐：自动编码 + 更灵活）

这个方式的优点是：你可以直接写中文消息，交给 encodeURIComponent() 去编码。

<button type="button" onclick="openWhatsApp()">WhatsApp 咨询</button>

<script>
  function openWhatsApp() {
    // 只写数字：国家区号 + 手机号（不要 +、不要空格）
    var phone = "8613800138000";
    var text = encodeURIComponent("你好，我想咨询一下（请留下你的需求/预算/联系方式）");

    // wa.me 是最常用的写法
    var url = "https://wa.me/" + phone + "?text=" + text;

    // 注意：window.open 可能会被某些浏览器/内置浏览器拦截
    window.open(url, "_blank");
  }
</script>

如果你希望“尽量别被拦截”，优先用 <a href="...">，少用 window.open()。

WordPress 怎么加（最省事的放法）

常见三种位置：

文章/页面里：用 Gutenberg 的「自定义 HTML」区块，把上面任意一段贴进去
侧边栏/页脚：外观的小工具/区块，同样贴「自定义 HTML」
菜单里：菜单 URL 直接填 https://wa.me/8613800138000

常见坑（出问题一般都在这）

点击后没打开 WhatsApp？

桌面端一般会打开 WhatsApp Web（前提是你浏览器能访问）。
微信/某些 App 内置浏览器可能会拦截跳转；这不是代码问题，换系统浏览器测试最直接。
window.open() 可能被拦截：改用 <a> 链接最稳。

为什么我的中文消息是乱码？

你没编码。两种处理方式：

直接把 text= 后面的内容 URL 编码
或用上面「方法 5」的 encodeURIComponent()（省事）

要不要把号码写在前端？会不会被爬？

想完全不暴露基本不现实（你总得让用户能联系你）。如果你就是不想“页面源代码里一眼看到号码”，可以把号码拆开拼接（防君子不防小人）：

<script>
  var phone = "86" + "13800138000";
  // ...
</script>

（可选）顺便做个“点击统计”

如果你用 GTM/UMAMI 之类想统计点击次数，最简单做法是给链接一个 id/class：

<a id="wa-contact" href="https://wa.me/8613800138000" target="_blank" rel="noopener noreferrer">
  WhatsApp 联系
</a>

然后在统计工具里对 #wa-contact 做点击事件触发即可。