vue项目引入容联七陌客服系统(qimoChatClick点击事件的使用)
本文主要介绍七陌客服基本使用方式包括自定义的字段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/
更多推荐
已为社区贡献5条内容
所有评论(0)