CS 客服系统 · 接入示例

这个页面就是「你的任意项目」，右下角那个气泡就是一行 <script> 接进来的客服浮窗。契约 v1

① 最小接入（一行）

<script src="http://192.168.0.106:8091/widget.js" data-project="demo" defer></script>

就这一行，右下角出现客服气泡，点开就能聊天。

② 带登录用户身份（让客服知道「这是谁」）

签名必须在你自己的后端算（用项目 secret），前端只拿结果：

// 你的后端（Node 示例）—— appSecret 绝不能放前端
const crypto = require('crypto');
const signature = crypto.createHmac('sha256', appSecret).update(`${appKey}|${uid}`).digest('hex');
// 前端拿到 signature 后：
CsWidget.init({ project:'demo', uid:'u_10086', name:'张三', signature, extra:{ vip:'v3' } });

注意：这里为了演示没有传签名（demo 项目没开强制校验）。生产项目请务必传签名。

③ 事件监听（自定义角标 / 埋点）

CsWidget.on('unread', n => { document.title = n ? `(${n}) 我的页面` : '我的页面'; });
CsWidget.on('open',   () => console.log('客服面板打开了'));
CsWidget.on('message', m => console.log('收到消息', m));

打开浮窗发一句话，然后抬头看浏览器标签页标题应该会带上未读数。

④ App（WebView）接入

// Android / Kotlin：与网页完全同一套后端，不用写原生 UI
val url = "http://192.168.0.106:8091/full?project=demo&uid=$uid&name=$name&lang=auto&signature=$sig"
webView.loadUrl(url)