将客服组件嵌入到您的网站，支持浮动按钮、iframe 嵌入、链接跳转等多种方式
在页面右下角显示聊天按钮，点击弹出客服窗口
<!-- 浮动按钮 + iframe 弹窗方式 -->
<div id="cs-widget-btn" style="position:fixed;right:20px;bottom:20px;z-index:9998;cursor:pointer;width:56px;height:56px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);">
<svg width="28" height="28" fill="white" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
</div>
<div id="cs-widget-frame" style="display:none;position:fixed;right:20px;bottom:90px;width:400px;height:600px;z-index:9999;">
<iframe src="https://your-domain.com/chat?embed=1&mode=human&agent_key=YOUR_AGENT_KEY" style="width:100%;height:100%;border:none;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);" allow="clipboard-write"></iframe>
</div>
<script>
(function(){
var btn=document.getElementById('cs-widget-btn');
var frame=document.getElementById('cs-widget-frame');
var open=false;
btn.addEventListener('click',function(){
open=!open;
frame.style.display=open?'block':'none';
});
})();
</script>将客服窗口以 iframe 形式固定在页面中
<!-- iframe 方式接入 -->
<iframe
src="https://your-domain.com/chat?embed=1&mode=human&agent_key=YOUR_AGENT_KEY"
style="position:fixed;right:20px;bottom:20px;width:400px;height:600px;border:none;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);z-index:9999;"
allow="clipboard-write"
></iframe>通过链接跳转到独立客服页面
<!-- 链接方式接入：点击打开新窗口 -->
<a href="https://your-domain.com/chat?agent_key=YOUR_AGENT_KEY" target="_blank" rel="noopener">
在线客服
</a>生成独立的客服聊天页面，可部署到任意静态服务器或直接打开使用
使用说明
填写以下配置后生成并下载 chat-widget.html 文件。该文件为纯静态 HTML，可直接用浏览器打开，或部署到任意静态服务器。
通过在聊天页 URL 后附加参数，可以控制客服窗口的行为和语言
指定访客对话绑定到哪个客服。可在客服台「用户管理」中查看每个客服的 agent_key。缺少此参数将无法打开会话。
https://your-domain.com/chat?agent_key=YOUR_AGENT_KEY指定访客打开客服窗口时的聊天模式。human（人工客服，默认）、ai（AI 客服）。不填默认为人工客服。
提示：只有在 URL 中显式指定 mode 参数时，才会显示头部的人工/AI 客服切换按钮。不填则隐藏切换按钮。
https://your-domain.com/chat?mode=ai&agent_key=YOUR_AGENT_KEY启用嵌入模式，隐藏顶部导航栏等元素，使界面更紧凑。当聊天页在 iframe 内加载时会自动进入嵌入模式，也可显式添加此参数强制启用。
https://your-domain.com/chat?embed=1&agent_key=YOUR_AGENT_KEY强制客服窗口使用指定语言显示。支持 zh-CN（中文）、en（英文）。不填默认为中文。
https://your-domain.com/chat?lang=en&agent_key=YOUR_AGENT_KEY预填访客的联系信息，访客打开对话时自动保存到后台。客服可在「访客信息」面板查看和编辑。
name— 姓名email— 邮箱phone— 手机money— 余额username— 用户名称uid— 用户IDremark— 备注age— 年龄字段锁定：name / email / phone 三个内置字段支持在访客信息面板点击小锁图标单独锁定。锁定后，即使 URL 传入新值也不会覆盖。
https://your-domain.com/chat?agent_key=YOUR_AGENT_KEY&name=张三&email=test@example.com&phone=13800138000多个参数可以同时使用，用 & 连接：
https://your-domain.com/chat?embed=1&lang=en&mode=ai&agent_key=YOUR_AGENT_KEY&name=张三&email=test@example.com&uid=U10001以上示例：以嵌入模式打开英文界面的客服窗口，进入 AI 客服模式，并预填访客姓名、邮箱和用户ID。
agent_key 说明
代码中的 YOUR_AGENT_KEY 需替换为实际的客服 Key。登录客服台后，在「用户管理」中可查看每个客服的 agent_key。agent_key 用于将访客对话绑定到指定客服。