` 变更），无需您手写任何额外打点，客服端坐席就能实时看到访客当前正浏览哪个页面或商品。 ### 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>企业官网

# 在线客服 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}