# WhatsApp 小组件 ## WhatsApp 小组件集成 通过本指南，您可以轻松地将浮动 WhatsApp 聊天按钮添加到您的网站。 > **温馨提示：** WhatsApp 小组件是一个简单的“点击聊天”按钮——访客点击后会打开 WhatsApp，以便直接向您发送消息。它不会将消息同步到您的聊天收件箱，也不会自动触发 AI。如果您需要嵌入在网页内的 AI 聊天体验，请改用单独的 [聊天小组件](chat-widget.md)。 > > **只需普通链接或自定义按钮？** 如果您不需要浮动小组件，而是想将自己的按钮（或一段文本）直接链接到 WhatsApp 聊天，请直接跳至下方的 [需要普通链接或按钮？(wa.me)](#prefer-a-plain-link-or-button-wa-me)。如需短信功能的等效方案，请参阅 [添加点击发送短信 (SMS) 链接](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website)。 ### 安装 1. 在文本编辑器中打开您网站的 HTML 文件。 2. 找到 `` 标签（通常位于 HTML 文件的末尾）。 3. 将以下脚本粘贴到 `` 标签之前： {% code overflow="wrap" %} ```html ``` {% endcode %} 1. 在上述代码中，替换： * `NUMBER` 为您的 WhatsApp 号码 * 例如：对于号码 +1 555 123 4567，只需使用：15551234567 ### 添加自定义消息 如果您希望用户点击按钮时出现预填写的消息： 1. 请改用此代码： {% code overflow="wrap" %} ```html ``` {% endcode %} 1. 包含真实号码和消息的示例： {% code overflow="wrap" %} ```html ``` {% endcode %} ### 您将获得的功能 安装完成后，您将自动看到： * 网站右下角出现一个绿色的 WhatsApp 按钮 * 滚动页面时按钮保持可见 * 按钮在移动设备上运行流畅 * 鼠标悬停在按钮上时会出现细微的动画效果 ### 更多信息 * 您的电话号码书写时可以包含或不包含以下内容： * 加号 (+) * 空格 * 连字符 (-) * 系统会自动正确处理这些内容 * 消息中可以自然地包含空格 * 无需额外文件或安装 * 按钮会自动适配移动端屏幕 ### 完整的网页示例 {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## 想要使用简单的链接或按钮？(wa.me) 上面的小部件为您提供了一个现成的悬浮按钮。但如果您已经有了自己的按钮（或菜单链接、图片或一段文字），并且只想让它打开一个包含您号码的 WhatsApp 聊天窗口，那么您根本不需要使用该小部件——只需将其链接到 `wa.me` URL 即可。 格式如下： {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} 将 `NUMBER` 替换为您国际格式的完整号码——**仅限数字，不要包含加号、空格或连字符**。例如，对于 +31 6 5801 5937，您应该使用： {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### 预填消息内容 若要在聊天窗口打开时预填好消息，请添加 `?text=` 并紧跟您的消息内容： {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} 消息中的空格需要写成 `%20`（这是链接处理空格的标准方式）。 ### 将其放置在按钮上 将任何按钮链接到该 URL——就像您将按钮链接到任何其他网页地址一样。在原始 HTML 中，它看起来像这样： {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} 在网站构建器（如 Wix、Squarespace、WordPress、Webflow 等）中，像往常一样添加一个按钮，并将 `wa.me` URL 粘贴到其“链接”/“URL”字段中。 > **想要一个可以在多个号码之间轮换、记住回访者并跟踪点击次数的短链接吗？** 请使用短链接（在 **设置 → 渠道** 下），而不是直接使用 `wa.me` URL。