网站集成

将客服聊天窗口嵌入您的网站

集成方式概述

提供三种方式将客服聊天窗口集成到您的网站：JavaScript Widget、iframe 嵌入、浮动按钮触发。您可以根据实际需求选择合适的方式。

方式一：JS SDK（推荐）

一行代码嵌入，自动创建浮动按钮和聊天窗口。将以下代码添加到页面 </body> 标签末尾：

<script src="https://your-domain.com/chat-widget.js"
  data-tenant="YOUR_TENANT_ID"
  data-bottom="70"
  data-offset="50"
  data-width="420"
  data-height="620"></script>

可选参数

参数	说明	默认值
data-tenant	企业 ID（必填）	—
data-server	服务端地址	https://kf.guoway.net
data-text	按钮文案	💬 在线客服
data-color	按钮颜色	#667eea
data-position	按钮位置 left/right	right
data-bottom	距底部距离（px）	70
data-offset	距左右边距（px）	50
data-width	窗口宽度（px）	420
data-height	窗口高度（px）	620
data-mobile	移动端全屏	true
data-auto-open	页面加载后自动打开	false
data-auto-open-delay	自动打开延迟（ms）	3000

JS API

// 打开窗口
ChatWidget.open()
// 关闭窗口
ChatWidget.close()
// 切换显隐
ChatWidget.toggle()

方式二：iframe 嵌入

纯 iframe 方式，无需 JS SDK：

<iframe src="https://your-domain.com/chat?tenant_id=YOUR_TENANT_ID"
  style="position:fixed;bottom:20px;right:20px;width:420px;
         height:620px;border:none;border-radius:12px;
         box-shadow:0 8px 32px rgba(0,0,0,0.18);z-index:9999;">
</iframe>

const button = document.getElementById('chatButton'); if (container.style.display === 'none') { container.style.display = 'block'; button.textContent = '✕ 关闭'; } else { container.style.display = 'none'; button.textContent = '💬 联系客服'; } }

移动端适配

聊天窗口自动适应移动端屏幕尺寸，在手机上将自动切换为全屏模式。可通过 data-mobile="false" 关闭。

集成测试

页面加载：确认浮动按钮正常显示
发送消息：测试发送文本、图片、视频、文件
接收消息：测试客服回复是否能正常接收
移动端：在手机上测试显示和操作