Your AI Connector Docs

WhatsApp 小组件

WhatsApp 小组件集成

通过本指南，您可以轻松地将浮动 WhatsApp 聊天按钮添加到您的网站。

温馨提示： WhatsApp 小组件是一个简单的“点击聊天”按钮——访客点击后会打开 WhatsApp，以便直接向您发送消息。它不会将消息同步到您的聊天收件箱，也不会自动触发 AI。如果您需要嵌入在网页内的 AI 聊天体验，请改用单独的 聊天小组件。

只需普通链接或自定义按钮？ 如果您不需要浮动小组件，而是想将自己的按钮（或一段文本）直接链接到 WhatsApp 聊天，请直接跳至下方的 需要普通链接或按钮？(wa.me)。如需短信功能的等效方案，请参阅 添加点击发送短信 (SMS) 链接。

安装

  1. 在文本编辑器中打开您网站的 HTML 文件。
  2. 找到 </body> 标签（通常位于 HTML 文件的末尾）。
  3. 将以下脚本粘贴到 </body> 标签之前：
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. 在上述代码中，替换：
    • NUMBER 为您的 WhatsApp 号码
    • 例如：对于号码 +1 555 123 4567，只需使用：15551234567

添加自定义消息

如果您希望用户点击按钮时出现预填写的消息：

  1. 请改用此代码：
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. 包含真实号码和消息的示例：
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

您将获得的功能

安装完成后，您将自动看到：

  • 网站右下角出现一个绿色的 WhatsApp 按钮
  • 滚动页面时按钮保持可见
  • 按钮在移动设备上运行流畅
  • 鼠标悬停在按钮上时会出现细微的动画效果

更多信息

  • 您的电话号码书写时可以包含或不包含以下内容：
    • 加号 (+)
    • 空格
    • 连字符 (-)
    • 系统会自动正确处理这些内容
  • 消息中可以自然地包含空格
  • 无需额外文件或安装
  • 按钮会自动适配移动端屏幕

完整的网页示例 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

想要使用简单的链接或按钮？(wa.me)

上面的小部件为您提供了一个现成的悬浮按钮。但如果您已经有了自己的按钮（或菜单链接、图片或一段文字），并且只想让它打开一个包含您号码的 WhatsApp 聊天窗口，那么您根本不需要使用该小部件——只需将其链接到 wa.me URL 即可。

格式如下：

https://wa.me/NUMBER

将 NUMBER 替换为您国际格式的完整号码——仅限数字，不要包含加号、空格或连字符。例如，对于 +31 6 5801 5937，您应该使用：

https://wa.me/31658015937

预填消息内容

若要在聊天窗口打开时预填好消息，请添加 ?text= 并紧跟您的消息内容：

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

消息中的空格需要写成 %20（这是链接处理空格的标准方式）。

将其放置在按钮上

将任何按钮链接到该 URL——就像您将按钮链接到任何其他网页地址一样。在原始 HTML 中，它看起来像这样：

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

在网站构建器（如 Wix、Squarespace、WordPress、Webflow 等）中，像往常一样添加一个按钮，并将 wa.me URL 粘贴到其“链接”/“URL”字段中。

想要一个可以在多个号码之间轮换、记住回访者并跟踪点击次数的短链接吗？ 请使用短链接（在 设置 → 渠道 下），而不是直接使用 wa.me URL。