H5集成环信在线客服

集成流程步骤

前端框架使用的是vue

1、引入第三方js库

<script src='https://kefu.sh.absoloop.com/webim/easemob.js'></script>

2、初始化参数

(window as any).easemobim = (window as any).easemobim || {};
  easemobim.config = {
    hide: true,
    autoConnect: false,
    popup: {
      autoOpen: false,
      mldID: userID.value,    //弹框透传参数
      userTYPE: userTYPE.value,
    },
    onready: function () {
      console.log("聊天窗口加载完成");
    },
    //会话创建成功的回调
    onsessioncreat: function () {
      // sendCrmExtendMessage();
      console.log("【oncreat】收到会话创建事件回调");
      sendCrmExtendMessage();
    },
    /* 收消息回调，只对当前打开的聊天窗口有效 */
    onmessage: function () {
      // sendCrmExtendMessage(userId);
      sendCrmExtendMessage();
      console.log("【onmessage】接收坐席发送的消息回调");
    },
  };
  easemobim.bind({
    configId: "xxx自己的id",
  });

//iframe 透传参数
const sendCrmExtendMessage = () => {
  easemobim.sendExt({
    ext: {
      cmd: {
        updateVisitorInfoSrc: {
          params: {
            mldID: userID.value,
            userTYPE: userTYPE.value,
          },
        },
      },
    },
  });
};

3、访客通过订单列表发送信息上屏

//发送订单id 注意：value值必须是字符串类型
const sendOrder = (item) => {
  let str = "订单号：" + item.id;
  window.parent.postMessage(
    JSON.stringify({ type: "POPUP_ORDER", value: str }),
    "*"
  );
};

4、客服后台配置

（1）设置订单列表弹框 接入-》在线客服 -》网站 -》功能设置

（2）坐席iframe页面配置 设置 -》扩展集成 -》iframe窗口（需开通）

5、iframe页面发送富文本信息

const sendNewOrder = () => {
  var standardData = {
    easemob: {
      kefu: {
        sendMsg: {
          msg: `[{\"type\":\"richText\",\"content\":\"<div class='dh_rich_text'><p>您是否要咨询以下订单？</p><p>订单号：${newOrderInfo.value.id}</p><p>订单类型：<span style='color: #4095E5;'>${newOrderInfo.value.timeTypeName}</span></p><p>农作物类型：${newOrderInfo.value.cropName}</p><p>订单总价：<span style='color: #4095E5;'>${newOrderInfo.value.totalPrice}元</span></p><ul class='dh_option_list' style='display: block;'><li><a style='color: #fff;background: #4095E5;display: block; border-radius: 5px; text-align: center;margin-top: 5px;' name='是'>是</a></li><li><a style='color: #fff;background: #4095E5;display: block; border-radius: 5px; text-align: center;margin-top: 5px;' name='其他订单'>其他订单</a></li></ul></div>\"}]`,
          type: "txt",
        },
      },
    },
  };
  window.parent.postMessage(standardData, "*");
};

//填写工单
const sendWorkOrder = () => {
  var workOrderData = {
    easemob: {
      kefu: {
        sendMsg: {
          msg: `[{\"type\":\"richText\",\"content\":\"<div class='dh_rich_text'><p>请填写您的问题工单</p><ul class='dh_option_list' style='display: block;'><li><a style='color: #fff;background: #4095E5;display: block; border-radius: 5px; text-align: center;margin-top: 5px;' href='https://customer.maliduo.com/orderFeedback?userId=${userId.value}&userType=${userTYPE.value}'>去填写</a></li></ul></div>\"}]`,
          type: "txt",
        },
      },
    },
  };
  window.parent.postMessage(workOrderData, "*");
};

//填写意见反馈
const sendOpinion = () => {
  var workOrderData = {
    easemob: {
      kefu: {
        sendMsg: {
          msg: `[{\"type\":\"richText\",\"content\":\"<div class='dh_rich_text'><p>请填写您的意见反馈</p><ul class='dh_option_list' style='display: block;'><li><a style='color: #fff;background: #4095E5;display: block; border-radius: 5px; text-align: center;margin-top: 5px;' href='https://customer.maliduo.com/opinionFeedback?userId=${userId.value}&userType=${userTYPE.value}'>去填写</a></li></ul></div>\"}]`,
          type: "txt",
        },
      },
    },
  };
  window.parent.postMessage(workOrderData, "*");
};