vue项目引入容联七陌客服系统(qimoChatClick点击事件的使用)

前端接入客服步骤

第一步、引入链接

第二步、对客服按钮进行显示隐藏处理

• 获取到元素再进行修改即可,若是原生按钮,按照如下代码设置即可.

let qimoDom = document.getElementById('chatBtn')
if (qimoDom) {
qimoDom.style.display = 'none'
}

• 若是自定义按钮,需要将引入js里的参数autoShow的值改为false，隐藏默认按钮, 之后再将自定义按钮即可自行设置显示隐藏

第三步、Vue项目事件引入七陌客服方式

官网上面例子是:

onclick=“qimoChatClick();

但是vue页面调用qimoChatClick事件需要使用

window.qimoChatClick()

可选(添加自定义用户信息及扩展信息上传)

// 引入七陌机器人
var getQimo = function () {
  getUserInfo().then(({data}) => {
    // console.log('输出结果信息', data)
    if (data.code == 22000) {
      if (data.result) {
        (function (a, h, c, b, f, g) {
          var nosignScript = document.querySelector('#qimo')
          // 存在链接就不再新生成七陌机器人
          if (nosignScript) {
            return
          }
          // 添加参数、必须添加到qimoClientId对象里面
          a['qimoClientId'] = {
            userId: data.person_code ? `${data.person_code}` : '', // 自定义用户的唯一id，不能传空字符串、null、中文，id由字母大小写、数字及'-'和 '_'组成
            // 扩展字段
            customField: {
                // 扩展字段，json对象，对象中的key-value都自定义
                // 这些字段可在客服的扩展字段内查看到
              手机号: data.phone,
              用户名: data.realname ? data.realname : '无'
            }
          }
          // 生成script节点
          g = h.createElement(c)
          g.async = 1
          g.charset = 'utf-8'
          g.src = b
          g.setAttribute('id', 'qimo')
          c = h.getElementsByTagName(c)[0]
          // 插入生成的script标签链接
          c.parentNode.insertBefore(g, c)
        })(window, document, 'script', '//wechat .7mo o r.com/javascripts/7moorInit.js?accessId=****************&autoShow=true&language=ZHCN', 'ud')
      }
    }
  })
}

其他

注意
小程序添加客服,需要先在微信开发者工具的开发选项里面添加业务域名,添加业务域名前需要联系对方开发人员添加校验文件

同时小程序需要在会话专属链接配置里面生成新链接,使用自定义按钮进行外链跳转(小程序只能通过外链跳转,且若是H5封装的小程序需要注意区分环境,防止业务域名验证不通过)

goQimo() {
    window.location.href = 'https://webchat.7*******'
            },

下图 修改 按钮可对客服按钮样式形式进行设置

下图仅部分对客服按钮样式设置(PC端、移动端)

参考

官网的开发者中心网址

https://developer.7moor.com/online-service-kf02/

七陌网站客服设置地址

https://kf.7moor.com/