IframeUi接入

约 348 字大约 1 分钟

2025-04-16

IframeUi 接入

方便、快捷、低定制化接入

权限问题

接入怎么用，怎么使用对应的能力，怎么实现按钮和功能的定制，怎么实现 UI 定制

采用响应式设计

准备：

下载我们提供的 SDK
在您的页面中引入

<head>
  <script src="./xk-chat-openai.min.js"></script>
</head>

初始化：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>中交人工智能服务-AI开放嵌入助手</title>
    <script src="xk-chat-openai.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    // 请在服务端调用 createApiToken 接口生成token
    var token = createApiToken();

    // 初始化 UI iframe
    const docmeeUI = new DocmeeUI({
      assistantId: "",
      token: token, // token
      container: document.querySelector("#container"), // 挂载 iframe 的容器
      mode: "light", // light 亮色模式, dark 暗色模式，
      buttonList: [
         {title: '一键归类', eventName: 'callbackFnName'}
      ],
      ableList: {
        isShowSearch: true
     }
      onMessage(message) {
        console.log("监听事件", message); //在这里做一些回调
      },
    });
  </script>
</html>

前往后台管理配置创建专属智能体

回调事件

docmeeUI.input = (eventType) => {
   //eventType === '@' or '/'
}

documeeUI.ableContent = (eventType) => {
  // 点击@呼出的能力按钮
}

其它回调事件，渐进开发

嵌入效果

组件接入

高定制化接入，需要一定的接入成本和时间

pnpm install xk-chat-openai

@todo 完成 iframe-ui 接入，再根据需求考虑是否构建组件接入方式