Web UI SDK接入

更新于 2026-01-26

通过 JS SDK 将匠邦AI嵌入您的应用，支持消息回调、事件监听与主动控制。

✏️

接入前提，获取调用所需的鉴权code： Open API获取鉴权

基础使用

CDN 引用

<script src="https://输入域名（该域名需先提供匠邦AI绑定）/sdk/ai/ai_iframe_sdk.min.js"></script>
<script>
  // (可选) 创建 AbortController 用于控制取消
  // const controller = new AbortController();
  // const signal = controller.signal;

  const sdk = new AiWebSDK({
    code: '',             // openAPI 获取到的鉴权code
    path: "",             // 路径如: /ppt
    type: "",             // user或sys_user，与openAPI获取到的鉴权code参数一样
    interceptCharging: false,  // 是否监听事件
    // signal: signal,   // 可选，用于取消 SDK 加载和显示的 AbortSignal
    onMessage: function(message) {
      /* 消息回调 */
    },
    onEvent: function(eventType, data) {
      /* 事件回调 */
    }
  });
  sdk.show();
</script>

Demo 示例

<!DOCTYPE html>
<!--suppress JSUnresolvedFunction, JSUnresolvedVariable -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Subtitles</title>
    <script src="https://请填写的域名/sdk/ai/ai_iframe_sdk.min.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>

  <body>
    <script>
      function getIframe() {
        // const controller = new AbortController();
        // const signal = controller.signal;
        let data = {
          code: 'cddcaa298a1144be892d5d98b8f802a2', // 参数code，每次加载iframe都需要重新获取
          path: "/chat/gy6ewnr3", // 相关跳转路径请看开发文档
          type: "sys_user",
          // signal: signal,   // 可选，用于取消 SDK 加载和显示的 AbortSignal
          onMessage: onMessage,
          onEvent: onEvent,
          interceptCharging: false, // 是否监听事件（true-开启，false-关闭）
        };
        let sdk = null;
        try {
          sdk = new AiWebSDK(data);
          sdk.show().catch((e) => {});
        } catch (e) {
          console.log(e, "eee");
        }
        return sdk;
      }

      function onMessage(e) {
        console.log(e);
      }

      const iframeSdk = getIframe();

      function onEvent(eventType, data) {
        console.log(data); // 不需要打印日志，则可以去掉
        if (eventType === 'PRE_CHARGING') {
          /* 获取应用预扣减金币数，可自行判断是否拦截提问 */
          const { type, count } = data; // type扣费类型: gold金币  count扣费数
          iframeSdk.chargingContinue(true); // 根据具体业务判断用户是否允许发起提问（true 或 false）
        }
        if (eventType === 'CHARGING') {
          /* 扣费 */
          const { type, count } = data;
        }
      }
    </script>
  </body>
</html>

Demo 文件

webSdk.zip
3.65KB

参值说明

参数 类型 是否必传 参数说明
code string 是

调用匠邦AI鉴权接口获取到的 code。

⚠️

每次进入加载 iframe 的时候，都需要重新调用 Open API获取鉴权 获取 code 进行登录，一个 code 只能使用一次。
path string 否 应用页面，如：/org/app
type string 是 登录的用户类型：sys_user
interceptCharging boolean 否 是否监听事件（true - 开启，false - 关闭）

path 参值路径配置

场景 类型 访问路径 位置
会话 页面 传空值 会话
应用 页面 /org/app 应用
应用聊天页（含会话列表） 页面 /chat/应用guid 应用聊天页（含会话列表）
应用聊天页（纯聊天页） 页面 /share/chat/应用guid 应用聊天页（纯聊天页）
导图页（含会话列表） 页面 /mind/应用guid 导图页（含会话列表）
全屏导图页（纯导图页） 页面 /fmind/应用guid 全屏导图页（纯导图页）
PPT 页面 /ppt PPT
作品（含 PPT、智课设计等） 页面 /doc/ppt 作品
我的 页面 /mine 我的
权益中心 页面 /task 权益中心
支付 弹窗 ?dialog=pay 支付
编辑岗位 弹窗 ?dialog=profession 编辑岗位
邀请好友 | 邀请同事 弹窗 ?dialog=invite 邀请好友1 邀请好友2
订单记录 弹窗 ?dialog=order 订单记录
机器人列表 弹窗 ?dialog=bot 机器人列表
用户权益 弹窗 ?dialog=rights 用户权益
我的邀请 弹窗 ?dialog=invite_record 我的邀请
分销中心 弹窗 ?dialog=distributor-info 分销中心
个人资料设置 弹窗 ?dialog=role-setting 个人资料设置
兑换码兑换 弹窗 ?dialog=exchange 兑换码兑换
金币明细 弹窗 ?dialog=gold 金币明细
兑换会员 弹窗 ?dialog=exchange-member 兑换会员
兑换会员 页面 /app/exchangeMember 兑换会员页面
我的钱包 弹窗 ?dialog=fn-wallet 我的钱包
指定语言 参数

非必填，默认使用浏览器语言。示例：

  1. 首页：/?language=zh-CN
  2. 应用聊天页：/chat/应用guid?language=zh-CN
  3. 应用页：/ppt?language=zh-CN
 非必填，默认使用浏览器语言

eventType 监听事件说明

使用前提：开启事件监听，在 SDK 源码中的 interceptCharging 设置为 true（true - 开启，false - 关闭）。

eventType 参数 说明
PRE_CHARGING
（校验余额）

type：扣费类型

gold：金币类型

count：扣费数量

在提问之前通知预计扣费数量，可以在这个事件中判断用户余额是否足够，会卡住提问逻辑，校验完成需要调用方法通知结果。

iframeSdk.chargingContinue(Boolean)：校验结果（布尔类型 true 或 false，通过后发起提问，拒绝后停止发起提问。）
CHARGING
（扣费通知）

type：扣费类型

gold：金币类型

count：扣费数量

 与 AI 对话完成之后，通知扣费数量。