三粒臻品 · 智能客服演示页

一、本页即演示

点击右下角的绿色气泡按钮，即可打开智能客服窗口。当前已接入 AI 大模型服务，回复由 AI 实时生成。

把下面这段代码粘贴到 www.sanlizhenpin.com 的 CMS 全局页脚（每页都要出现的位置）即可：

<script src="https://sanli-chat.app.workbuddy.host/chat-widget.js?v=4" data-mode="cloud" defer></script>

提示：以后每次更新客服功能，把 ?v=4 升级为 ?v=5、?v=6…即可让访客立即拿到最新版本（绕过 CDN 缓存）。

浏览器打开 https://sanli-chat.app.workbuddy.host/admin.html，用管理员账号登录（账号密码由部署时提供）。功能：查看全部会话与聊天记录、人工接管会话（暂停 AI 自动回复）、直接给访客发消息、一键交还 AI。请勿对外公开后台地址。

属性	说明	示例
`data-mode`	cloud 云服务大模型（已开通）/ demo 演示 / custom 自建代理	`data-mode="cloud"`
`data-api-server`	后端代理地址（custom 模式必填）	`data-api-server="https://api.xxx.com"`
`data-title`	聊天窗口标题	`data-title="三粒臻品 · 在线客服"`
`data-welcome`	欢迎语	自定义任意文案
`data-accent`	主题色（气泡与窗口主色）	`data-accent="#0F6E56"`

方式 A —— WorkBuddy 云服务（✅ 已开通）：嵌入代码加上 data-mode="cloud" 即可，免 API 密钥、免服务器，AI 调用自动走已开通的云服务通道。

方式 B —— 使用自己的 API Key（OpenAI 兼容接口，如 DeepSeek / 通义 / Moonshot / OpenAI）：部署本项目 server/ 目录的 Node 代理服务：

配置环境变量：API_KEY（你的密钥，仅存服务端）、API_BASE_URL（如 https://api.deepseek.com/v1）、MODEL、ALLOWED_ORIGINS（允许调用的网页来源，填 https://www.sanlizhenpin.com）
启动：node server.js（监听 $PORT，自带按 IP 限流）
嵌入代码改为：<script src="https://部署域名/chat-widget.js" data-mode="custom" data-api-server="https://代理地址" defer></script>

安全提示：API 密钥只放在后端代理环境变量中，绝不出现在网页代码里；代理已内置来源白名单与请求频率限制，防止密钥被盗用。

打开 chat.html，编辑文件顶部的 KB 对象（产品资料、购买、物流、人工服务话术）与 SYSTEM_PROMPT 即可，无需改动其他代码。当前已按「普通食品」广告法合规口径撰写，不含疗效宣称。