登记、复制、刷新，三步完成接入。

第 1 步：登记要接入的业务系统

点击下面的登记入口，登录或注册 DAP 帐号，然后填写业务系统名称和访问域名。提交后系统会自动生成 siteId 和接入信息；一个帐号可以登记并管理多个业务系统。

第 2 步：把这段代码放到页面底部

找到页面末尾的 </body>，把下面代码放在它前面。只替换 YOUR_SITE_ID 和 YOUR_APP_ID。

<script
  src="https://dap.cnyu.net/sdk/loader/v1.js"
  data-api-base="https://dap.cnyu.net"
  data-site-id="YOUR_SITE_ID"
  data-app-id="YOUR_APP_ID"
  data-fallback-url="https://dap.cnyu.net/support?siteId=YOUR_SITE_ID">
</script>

data-app-id 填一个能看懂的英文名称，例如 mall-pc 或 order-h5。

第 3 步：刷新页面并检查

1. 页面右下角出现客服气泡。
2. 点击气泡，直接展开在线客服对话窗口。
3. 发送一条消息，能在窗口内看到回复；页面不会跳到工单。
4. 需要人工或异步处理时，再点击对话窗口中的“转人工客服”或“提交工单”。
5. 用手机打开，对话窗口完整可用，输入框不会被键盘或气泡遮挡。

做到这里，最小接入就完成了。在线客服与工单是连续流程：先对话，需要时再转人工或升级工单。

第 4 步：按需要增加能力

下面都不是首次接入的必填项。建议先上线客服入口，再逐项增加。

const dap = await window.OCSLoader.ready;

// 用户登录后再调用；没有账号可以不调用
await dap.identify({
  userId: "YOUR_INTERNAL_USER_ID",
  userName: "Alice"
});

// 记录一个必要的业务行为
await dap.track("order_submitted", {
  page: location.pathname
});

不要把手机号、身份证、密码或完整订单内容直接放进行为记录。

演示对应说明

首次接入建议先完成在线客服和工单，再按业务需要增加其他能力。

const dap = await window.OCSLoader.ready;
const info = await dap.getCapabilities();
console.log(info.sdkVersion);

常见问题