diff --git a/README.md b/README.md index 4a5efc5..3ae0282 100644 --- a/README.md +++ b/README.md @@ -288,13 +288,12 @@ cd web && npx tsc --noEmit --- -## 设计稿与需求 +## 相关文档 -`docs/` 下保留各页面 HTML 原型与需求说明: - -- `docs/spec/` 开发需求 -- `docs/agent/` 租户端页面 -- `docs/admin/` 平台端页面 +- **[访客端对接与嵌入指南](docs/INTEGRATION_GUIDE.md)**(外部网站/SPA/App 快速集成 Widget) +- `docs/spec/` 开发需求与原型 +- `docs/agent/` 租户坐席端页面 +- `docs/admin/` 平台管理端页面 --- diff --git a/deploy/.env.prod.example b/deploy/.env.prod.example index 7cc6810..e29fc2c 100644 --- a/deploy/.env.prod.example +++ b/deploy/.env.prod.example @@ -21,6 +21,11 @@ DB_USER=kefu DB_PASSWORD=请改成强密码 DB_NAME=kefu_cloud DB_SSLMODE=disable +# 数据库连接池(可选,默认 50/10/60m/15m) +# DB_MAX_OPEN_CONNS=50 +# DB_MAX_IDLE_CONNS=10 +# DB_CONN_MAX_LIFETIME_MINUTES=60 +# DB_CONN_MAX_IDLE_MINUTES=15 # ========== JWT(deploy.sh 可自动生成)========== JWT_SECRET=请改成随机长字符串 diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index 0838cbc..4936329 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -98,6 +98,10 @@ services: DB_PASSWORD: ${DB_PASSWORD} DB_NAME: ${DB_NAME:-kefu_cloud} DB_SSLMODE: ${DB_SSLMODE:-disable} + DB_MAX_OPEN_CONNS: ${DB_MAX_OPEN_CONNS:-50} + DB_MAX_IDLE_CONNS: ${DB_MAX_IDLE_CONNS:-10} + DB_CONN_MAX_LIFETIME_MINUTES: ${DB_CONN_MAX_LIFETIME_MINUTES:-60} + DB_CONN_MAX_IDLE_MINUTES: ${DB_CONN_MAX_IDLE_MINUTES:-15} JWT_SECRET: ${JWT_SECRET:?请设置 JWT_SECRET} CORS_ALLOW_ORIGINS: ${CORS_ALLOW_ORIGINS:-*} STORAGE_ENDPOINT: minio:9000 diff --git a/docs/INTEGRATION_GUIDE.md b/docs/INTEGRATION_GUIDE.md new file mode 100644 index 0000000..f8ef040 --- /dev/null +++ b/docs/INTEGRATION_GUIDE.md @@ -0,0 +1,212 @@ +# 在线客服 Web 端接入指南 + +本文档面向接入在线客服的网站开发与运维人员,帮助您在 1 分钟内将客服系统集成至您的企业官网、电商商城、Web 业务系统或单页应用(SPA)中。 + +--- + +## 1. 接入前准备 + +您只需要向客服系统管理员获取一个专属的 **渠道标识(Channel Key)**: + +| 参数 | 说明 | 示例 | +| :--- | :--- | :--- | +| **服务地址** | 客服系统统一入口 | `https://cloud.400cc.cn/` | +| **渠道标识(data-id)** | 您企业专属的渠道密钥 | `WK_8a3f2e` | + +> 💡 **获取方式**:登录客服工作台 -> 左侧菜单「系统设置」 -> 「渠道管理」 -> 复制您渠道的专属代码(其中的 `data-id` 即为您的 Channel Key)。 + +--- + +## 2. 快速接入(标准网页 / HTML) + +只需在您网站 HTML 页面的 `` 标签前添加一行 JavaScript 代码即可完成接入: + +```html + + +``` + +### 接入效果 +引入脚本后,页面右下角将自动挂载悬浮客服图标: +* **点击展开**:弹出响应式聊天窗口(默认 400×600px,移动端浏览器自动适配全屏)。 +* **自动提醒**:客服回复时,访客端自动显示未读消息红点徽标与声音提示。 +* **最小化与恢复**:访客可随时收起或重新唤起聊天窗,聊天记录在同一浏览器内自动保留。 + +--- + +## 3. 自定义触发按钮(用您网页中的按钮打开客服) + +如果您希望点击网页中现有的导航栏「在线咨询」、商品详情页的「联系客服」按钮来打开对话框,可以使用 SDK 提供的标准 JavaScript API。 + +### 3.1 代码示例 +```html + + + + +``` + +### 3.2 JavaScript API 速查 + +| 方法 / 属性 | 说明 | 示例 | +| :--- | :--- | :--- | +| `window.KefuWidget.open()` | 打开客服聊天窗口 | `window.KefuWidget.open()` | +| `window.KefuWidget.close()` | 收起 / 关闭客服聊天窗口 | `window.KefuWidget.close()` | +| `window.KefuWidget.channelKey` | 获取当前生效的渠道 Key | `console.log(window.KefuWidget.channelKey)` | + +--- + +## 4. 现代单页应用接入(Vue / React / Next.js) + +客服组件**原生适配单页应用(SPA)**。组件内部会自动侦听浏览器的路由变化(`history.pushState`、`replaceState`、`popstate` 以及页面 `` 变更),无需您手写任何额外打点,客服端坐席就能实时看到访客当前正浏览哪个页面或商品。 + +### 4.1 Vue 3 / Vite 接入 +直接在项目根目录的 `index.html` 引入(推荐): +```html +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>企业官网 + + +
+ + + + + + +``` + +若需在特定组件或登录成功后动态加载: +```vue + +``` + +### 4.2 React / Next.js 接入 +在根组件或页面布局中引入: +```tsx +import { useEffect } from 'react' + +export function KefuWidget() { + useEffect(() => { + if ((window as any).__KEFU_WIDGET_LOADED__) return + const script = document.createElement('script') + script.src = 'https://cloud.400cc.cn/widget.js' + script.setAttribute('data-id', 'WK_8a3f2e') + script.async = true + document.body.appendChild(script) + }, []) + + return null +} +``` + +Next.js 推荐写法: +```tsx +import Script from 'next/script' + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} +