Files

T

浅念 7b78c9bfd0 docs: 官网嵌入指南+CLAUDE.md血缘+README

Co-Authored-By: Claude Code <noreply@anthropic.com>

2026-09-29 20:12:26 +08:00

6.2 KiB

Raw Permalink Blame History

HESUPIPE AI 客服挂件 — 官网嵌入指南

给官网管理员的接入说明。不需要写代码，只需要复制粘贴一段代码。全程约 10 分钟。

1. 嵌入代码（直接复制粘贴）

在正式开始前，请先向开发确认一件事：客服系统部署后的域名是什么（例如 ai.hesupipe.com）。下面代码里的 https://ai.hesupipe.com 请替换成实际域名。

<!-- HESUPIPE AI 客服挂件 开始 -->
<script
    src="https://ai.hesupipe.com/static/widget.js"
    data-position="bottom-right"
    data-color="#066fc0"
    data-title="HESUPIPE Support"
    data-whatsapp="https://wa.me/+8615937108317"
    data-email="mailto:hesu@hesuu.com"
    data-auto-invite="true"
></script>
<!-- HESUPIPE AI 客服挂件 结束 -->

粘贴后刷新官网任意页面，右下角应出现蓝色 "Chat with us" 胶囊按钮，即嵌入成功。

本地/测试环境预览：部署前想先看效果，把 src 换成本地服务地址 http://localhost:8017/static/widget.js（需本地启动服务）。

2. 贴到哪里（WordPress 三种主流方式，任选其一）

方式 A：自定义 HTML 小工具（最简单，推荐）

WordPress 后台 → 外观 → 小工具
找到 自定义 HTML 小工具，添加到 Footer（页脚） 区域
把上面的嵌入代码整段粘贴进内容框
保存，刷新官网前台页面验证

方式 B：主题设置里的"页脚脚本"输入框

很多商业主题自带代码注入功能：

外观 → 自定义（或主题设置），找类似 Footer Scripts / 页脚代码 / 跟踪代码 的输入框
把嵌入代码整段粘贴进去
保存发布

如果主题同时有"页眉脚本"和"页脚脚本"，选页脚（页面加载更快）。

方式 C：直接编辑页脚模板 footer.php（懂一点主题编辑时用）

外观 → 主题文件编辑器 → 右侧选择 Footer (footer.php)
找到 </body> 标签，把嵌入代码粘贴到 </body> 的上一行
点"更新文件"

注意：直接改主题文件时，主题更新后改动会被覆盖。建议在**子主题（Child Theme）**里改，或改用方式 A/B。

3. 可调配置说明

以下配置全部写在 <script> 标签上（即上面代码里 data-xxx 的部分），改属性值即可。 所有配置都可省略——省略时用默认值，默认值就是 HESUPIPE 官方配置。

属性	作用	可选值 / 默认值
`data-position`	挂件在页面上的位置	`bottom-right`（默认，右下）/ `bottom-left` / `top-right` / `top-left`
`data-color`	主题色（16 进制色值）	默认 `#066fc0`（HESUPIPE 品牌蓝）。改一个色值，按钮、面板、邀请卡整套颜色自动跟着变
`data-title`	聊天窗口顶部的标题	默认 `HESUPIPE Support`
`data-whatsapp`	挂件内 WhatsApp 按钮的跳转链接	默认 `https://wa.me/+8615937108317`
`data-email`	挂件内 Email 按钮的跳转链接	默认 `mailto:hesu@hesuu.com`
`data-auto-invite`	是否在访客停留约 5 秒后自动弹出邀请卡片	默认 `true`（弹出）。不想要自动弹卡改为 `"false"`
`data-theme`	聊天窗口明暗风格	默认 `light`；可选 `dark`
`data-auto-open`	页面打开时是否自动展开聊天窗口	默认 `false`（不展开）。一般不建议设 `true`，会打扰访客
`data-mobile`	移动端专用样式（圆形按钮+文字标签）	默认 `false`。移动端页面可设 `"true"`
`data-avatar`	客服头像图片地址	默认使用系统自带的 HESUPIPE 客服头像

最常改的三个：位置（data-position）、主题色（data-color）、WhatsApp 号（data-whatsapp）。

4. 主题色说明

默认主题色已经是 HESUPIPE 品牌蓝 #066fc0，正常情况什么都不用配。
只有当官网改版换品牌色时，才需要在 <script> 标签上加（或修改）data-color 属性，例如换成绿色：data-color="#0a7d4f"。
色值必须是 # 开头的 6 位 16 进制（如 #066fc0）。填错时挂件会自动退回品牌蓝并在浏览器控制台提示，不会显示成怪颜色。

5. 隐私政策（GDPR）配套要求

挂件的聊天窗口底部和自动邀请卡上，都会显示一行固定提示：

By chatting, you agree to our privacy policy.

其中 "privacy policy" 链接指向 https://hesupipe.com/privacy-policy/。

上线前请确认：

该隐私政策页面真实存在且可访问（2026-09 已验证可打开，为 HESU Technologies 完整隐私政策页）；
页面内容涵盖"聊天记录用于客户联络"的说明（如现有政策未覆盖，请让法务/业务侧补充）；
若日后隐私政策 URL 变更（如换域名、换路径），需通知开发修改挂件代码—— 该链接写死在 static/widget.js 中，改链接不是改配置就能完成的。

6. 常见问题

Q：贴上去没反应？ 检查 <script> 的 src 域名是否写对（必须是客服系统实际部署的域名，浏览器直接打开 https://你的域名/static/widget.js 应能看到一串代码）。再检查代码是否被 WordPress 编辑器自动加了转义或换行破坏。

Q：会拖慢官网吗？ 挂件代码很小，且放在页脚不影响首屏渲染。聊天连接只在访客点击按钮后建立。

Q：访客关掉了邀请卡还会一直弹吗？ 不会。访客点 X 或 "No Thanks" 后，本次浏览器会话内不会再自动弹出。

Q：想同时改 WhatsApp 号码和邮箱怎么办？ 改 data-whatsapp 和 data-email 两个属性的值即可，见第 3 节表格。

7. 上线检查单

客服系统已在生产域名部署并可访问（https://你的域名/health 返回 ok）
嵌入代码中 src 已替换为生产域名
已按第 2 节方式之一贴入官网，前台刷新后右下角可见挂件
官网隐私政策页可访问（见第 5 节）
手机浏览器打开官网验证显示正常（建议顺手测一台 Android 和一台 iPhone）
发一条测试消息，确认 AI 正常回复；留下测试联系方式，确认客户经理能收到通知

6.2 KiB Raw Permalink Blame History Unescape Escape