跳到主要内容
版本：v10

H5 网页渠道

春松客服的网页渠道聊天控件（Website Widget）是其最受欢迎的功能。它不仅是一个聊天框，还是一个功能强大的前端 SDK，可以与你的网站深度集成。

以下是关于该控件从安装、自定义到进阶使用的全方位指南：

1. 基础安装 (Installation)​

在春松客服后台创建“网页收件箱”后，系统会生成一段类似下方的 JavaScript 代码：

操作： 将此代码粘贴到你网站 HTML 的 </body> 标签之前即可。

2. 外观与行为自定义 (Customization)​

在 设置 -> 收件箱 -> [你的网页收件箱] -> 设置 中，你可以无需代码直接调整：

  • 品牌配色： 匹配你网站的主题色。
  • 欢迎语： 设置自动弹出的打招呼文字。
  • 预聊天表单 (Pre-chat Form)： 强制或可选要求用户输入姓名、邮箱、甚至选择咨询类别（如：销售/技术）。
  • 响应时间显示： 开启后会显示“通常在几分钟内回复”，增加用户信任感。
  • 多语言支持： 控件会自动根据用户的浏览器语言切换界面（支持中文）。

3. 进阶：通过 SDK 传递用户信息 (Identity)​

如果你有一个带登录系统的网站，不希望用户重复输入邮箱，可以通过 SDK 自动同步用户信息：

window.addEventListener("春松客服:ready", function () {
  window.cskefuSDK.setUser("user_id_123", {
    email: "user@example.com",
    name: "张三",
    identifier_hash: "HMAC_HASH_FROM_SERVER" // 安全验证（可选但推荐）
  });
  
  // 还可以传递自定义标签或属性
  window.cskefuSDK.setCustomAttributes({
    plan: "VIP客户",
    last_purchase_id: "987654"
  });
});

这样，当客服打开后台时，右侧边栏会直接显示该用户的详细资料，无需询问。

4. 交互触发控制 (Programmatic Control)​

你可以通过 JavaScript 脚本手动控制聊天框的状态：

  • 打开/关闭聊天框：window.$春松客服.toggle("open"); 或 window.$春松客服.toggle("close");
  • 监听事件： 你可以监听用户何时发消息，从而在你的分析工具（如 Google Analytics）中记录转化。

5. 常见功能配置技巧​

功能建议配置
下班自动回复在“工作时间”设置中开启，避免用户在深夜留言得不到回应。
连续对话开启“连续对话”功能，即使用户刷新页面，聊天记录也不会消失。
邮件补丁如果客服不在线，控件会提示用户留下邮箱，稍后回复将直接发到用户邮箱。

6. 常见问题排查​

  • 控件不显示？ 1. 检查 websiteToken 是否正确。
  1. 检查你的域名是否在春松客服的“授权域名”白名单中（如果有设置）。
  2. 检查自建服务器的 SSL 证书是否有效（HTTPS 环境下，HTTP 的 SDK 会被拦截）。
  • 消息延迟？ 通常是由于 Webhook 或 Redis 服务器连接不稳定导致的，自建版需检查侧边栏后台任务（Sidekiq）是否正常运行。

您接下来想尝试哪种操作？​

  • 我可以为您提供完整的 SDK API 文档说明（例如如何隐藏气泡图标）。
  • 如果您在做 React/Vue 项目，我可以提供对应的组件集成示例。