智企云工 — 让企业 AI 触手可及

概述

网页客服是智企云工最基础的接入方式。通过在网站中嵌入一段 JavaScript 代码，即可在页面右下角显示客服浮窗。访客点击浮窗即可与 AI 客服对话。支持自定义外观、触发方式、开场白等。

快速接入（3 步完成）

第 1 步：获取嵌入代码

进入项目 → "渠道管理" → "网页客服"，点击"生成代码"：

<script>
(function() {
  window.ZQKF_CONFIG = {
    projectId: "prj_m4k8n2x7",       // 你的项目 ID
    tenantId: "tnt_7x2m9p1q",        // 你的租户 ID
    position: "right-bottom",        // 浮窗位置：right-bottom / left-bottom
    theme: {
      primaryColor: "#3B82F6",       // 主题色
      title: "在线客服",             // 浮窗标题
      welcomeMsg: "您好！有什么可以帮您？"
    }
  };
  var s = document.createElement("script");
  s.src = "https://cdn.zhiqiyungong.com/widget/v2/kf-widget.min.js";
  document.head.appendChild(s);
})();
</script>

第 2 步：嵌入网站

将上述代码粘贴到你网站所有页面的 </body> 标签之前。

WordPress 用户：可以在后台"外观" → "主题编辑器" → "footer.php" 中添加。或使用插件 "Insert Headers and Footers"。

Next.js / React 用户：建议封装为全局组件：

// components/KfWidget.tsx
import { useEffect } from 'react';

export default function KfWidget() {
  useEffect(() => {
    window.ZQKF_CONFIG = {
      projectId: process.env.NEXT_PUBLIC_KF_PROJECT_ID,
      tenantId: process.env.NEXT_PUBLIC_KF_TENANT_ID,
      position: 'right-bottom',
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.zhiqiyungong.com/widget/v2/kf-widget.min.js';
    document.head.appendChild(script);
  }, []);

  return null;
}

第 3 步：测试验证

保存后刷新网页，检查右下角是否出现客服浮窗。点击浮窗打开对话窗口，输入一个问题测试 AI 回答是否正常。

高级配置

用户身份传递

如果你的网站有用户系统，可以将用户信息传递给客服浮窗，方便 AI 提供个性化服务：

window.ZQKF_CONFIG = {
  // ... 基础配置 ...
  user: {
    userId: "user_12345",        // 用户唯一 ID
    userName: "张三",            // 用户昵称
    userPhone: "138****8000",    // 手机号（脱敏）
    userLevel: "VIP"             // 会员等级
  }
};

自定义触发方式

除了默认浮窗，你也可以通过自定义按钮触发客服对话：

// 隐藏默认浮窗，使用自定义按钮
window.ZQKF_CONFIG = {
  // ...
  autoShow: false  // 不自动显示浮窗
};

// 在自定义按钮点击事件中调用
document.getElementById('my-chat-btn').addEventListener('click', () => {
  window.ZQKF.open();   // 打开对话窗口
  window.ZQKF.send('我想咨询商品价格'); // 自动发送一条消息
});

事件监听

// 监听对话事件
window.addEventListener('kf:opened', () => {
  console.log('客服窗口已打开');
});

window.addEventListener('kf:message_sent', (e) => {
  console.log('用户发送消息:', e.detail.message);
});

window.addEventListener('kf:closed', () => {
  console.log('客服窗口已关闭');
});

常见问题

浮窗加载不出来？

检查以下几点：① projectId 和 tenantId 是否正确；② 页面是否有 CSP（内容安全策略）阻止了外部脚本加载，需要在 CSP 头中添加 cdn.zhiqiyungong.com；③ 浏览器控制台是否有报错信息。

支持哪些浏览器？

支持 Chrome、Firefox、Safari、Edge 的最新两个主版本。支持移动端浏览器，在手机上会自动适配全屏对话界面。

网页客服接入

概述