文档

前端集成说明

更新时间:

使用背景

假如渠道部署后页面不满足业务需求,需要自定义对话聊天窗样式,可使用ChatSDK进行二次开发,满足业务定制要求。

注意进行二次定制开发后,智能客服内部答案渲染调整升级后,需要集成方升级ChatSDK或者修改应用的卡片版本。具体更新记录参考ChatSDK的ChangeLog

接入步骤

  1. 根据使用场景,选择使用机器人网页端集成示例或者渠道ChatUI IMSDK(V2)使用说明对接对话机器人

    1. 当没有人工服务需求,且所在浏览器或者内嵌webview支持SSE请求的话,可以使用机器人网页集成方式进行集成

    2. 当需要人工服务或者所在浏览器和内嵌webview支持websocket时,可以选择渠道ChatUI IMSDK(V2)使用说明对接方式进行集成

  2. 参考ChatSDK配置对话聊天窗页面样式

  3. requests.send改为第1步中的消息处理方法,确认消息是否正常发送和接收

  4. 接收到消息后,使用isvParser方法将对话机器人消息转换为ChatSDK的消息格式,注意isvParser使用格式是`isvParser({data: res})`

  5. 假如不使用ChatSDK渲染消息,接入方自己渲染消息,则需要注意答案格式问题

    1. 大模型卡片文本片段使用SentenceList数组中的Content拼接字段,外层的Content中可能会出现有`[1]`这样的引用标记

    2. 假如高频问答编辑使用了富文本格式答案,则最终输出时就会有富文本格式输出的情况。富文本答案消息中,为了保证格式一致性,在原始编辑内容后追加了一个样式文件并使用div包裹,例如原始文本是<p>原始文本</p>,则最终输出内容是<div id=\"se-knowledge\"><p>原始文本</p><link rel=\"stylesheet\" href=\"https://g.alicdn.com/isipfe/docs/rich.css?\"></div>,假如渲染时不需要这些内容,可以手动过滤掉。

常见问题

  1. 如何支持Post请求

    1. requests.send方法中写请求处理,返回Promise结果,Promise结果要求将对话机器人的返回结果原样返回,注意首字母要保持大写。

  2. 对头像等样式不满意,如何自定义样式

    1. 通过css选择器对头像等进行样式覆盖

  3. 头像没有展示

    1. ChatSDK的config.avatarWhiteList参数需要配置下要展示头像的卡片列表

  4. 点赞点踩没有展示

    1. ChatSDK需要配置requests.evaluate请求方法,并且检查下答案经过isvParser转换后的数据的meta.evaluable是否为true

      image

  1. 假如返回结果经过后端处理,将首字母改为了小写,则isvParser处理前需要先将首字母改为大写,处理代码参考

    function upperCaseBotMsg(msg) {
      let newMsg = msg;
      if (msg instanceof Array) {
        newMsg = msg.map((item) => {
          return upperCaseBotMsg(item);
        });
      } else if (typeof msg == 'object' && msg) {
        newMsg = {};
        for (const key in msg) {
          newMsg[key.substring(0, 1).toUpperCase() + key.substring(1)] = upperCaseBotMsg(msg[key]);
        }
      }
      return newMsg;
    }

  • 本页导读 (0)