网易七鱼客服对接记录以及Vue项目里使用

网易七鱼客服对接记录

之前是腾讯客服，因为业务关系，变更到七鱼，所以在这里记录一下

1.第一步

去http://help.qiyukf.com/官方注册一个账号

2第二步

找到自己需要的业务，我的是现在系统人工客服

官方提供的文档是两种，我的是自定义7鱼客服入口属于异步加载。所以我的代码是第一种。

<script>(function (w, d, n, a, j) {w[n] = w[n] || function () {(w[n].a = w[n].a || []).push(arguments);};j = d.createElement('script');j.async = true;j.src ='https://qiyukf.com/script/xxxxxxxxxx.js';d.body.appendChild(j);})(window, document, 'ysf');
</script>

3第三步

对于常规的业务无非就是，不带参数配置，带参数配置；对于两种业务的前提条件都是初始化，所以我们需要变量去记录初始化和配置加载是否成功

//传输客户资料
ysf('config', {uid: '123',data: JSON.stringify([{"key": "real_name","value": "土豪"},{"key": "mobile_phone","value": "18788882287","zone": "true"},{"key": "email","href": "13800000000@163.com"},{"index": 0,"key": "account","label": "账号","value": "zhangsan","zone": "true"},{"index": 1,"key": "merchano","label": "商户号","value": "KKKKK","zone": "true"},{"index": 2,"key": "sex","label": "性别","value": "先生","zone": "true"},{"index": 5,"key": "reg_date","label": "注册日期","value": "2015-11-16"},{"index": 6,"key": "last_login","label": "上次登录时间","value": "2015-12-22 15:38:54"}]),success: function () {isConfig = true}
});

第四步

初始化成功，并且配置也成功了，那完整的代码就是

(function (w, d, n, a, j) {w[n] = w[n] || function () {(w[n].a = w[n].a || []).push(arguments);};j = d.createElement('script');j.async = true;j.src = 'https://qiyukf.com/script/xxxxxxxxxxxxxxxxx.js';d.body.appendChild(j);
})(window, document, 'ysf')
var isSdkReady = false;
var isConfig = false
//传输客户资料
ysf('config', {uid: '123',data: JSON.stringify([{"key": "real_name","value": "土豪"},{"key": "mobile_phone","value": "18788882287","zone": "true"},{"key": "email","href": "13800000000@163.com"},{"index": 0,"key": "account","label": "账号","value": "zhangsan","zone": "true"},{"index": 1,"key": "merchano","label": "商户号","value": "KKKKK","zone": "true"},{"index": 2,"key": "sex","label": "性别","value": "先生","zone": "true"},{"index": 5,"key": "reg_date","label": "注册日期","value": "2015-11-16"},{"index": 6,"key": "last_login","label": "上次登录时间","value": "2015-12-22 15:38:54"}]),success: function () {isConfig = true}
});ysf('onready', function () {isSdkReady = true;
})window.openSdk = function () {console.log('isSdkReady', isSdkReady)console.log('isConfig', isConfig)if (isSdkReady && isConfig) {location.href = ysf('url');} else {console.log("sdk尚未加载成功，请稍后再试", 'error', 2000);}
}window.onload = openSdk

到这里基本上已经可以正常使用7鱼的客服了，不过vue里面却是遇到了一些问题，首先是，自己项目里做了安全策略，没有注意，域名安全问题；然后是Vue打包后客服无法正常使用，（src="XXXXXXXXXXXXXX?hidden = 1"可以隐藏掉自带的客服聊天窗口）

自己Vue的使用方式记录

1.首先是基本的，html里面

2.在Vue 里面都是工具类，想全局使用，特别是对于多场景，多自定义入口就比较需要了；在utils文件下新建一个fishkefu.js文件

// 记录加载初始化状态
let isSdkReady = false// 记录加载配置状态
let isConfig = falseexport default class {// 初始化static init() {ysf("onready", function () {isSdkReady = true});}// 配置客户参数static Config() {ysf("config", {uid: parseInt(Math.random() * 100),data: JSON.stringify([{key: "real_name",value: '123123',zone: "true"}]),success: function () {isConfig = true}});}// 打开客服链接static openSdk() {if (isSdkReady && isConfig) {location.href = ysf('url')} else {console.log("sdk尚未加载成功，请稍后再试", 'error', 2000);}}
}

3.Vue里面的挂载到全局的原型链上


import fishKefu from './utils/fishkefu' //七鱼客服Vue.prototype.fishkefu = fishKefu
/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: {App},template: '<App/>'
})

4.使用,初始化：this.fishkefu.init();配置options:this.fishkefu.Config;打开url跳转：this.fishkefu.openSdk()

//可以在App.vue,或者使用的组件里的生命周期里面初始化beforeMount() {this.fishkefu.init();},mounted(){this.fishkefu.init();},methods:{linkKefu(){this.fishkefu.openSdk();}}

网易七鱼客服对接记录以及Vue项目里使用相关推荐

网易七鱼面试 java_reactJs微信端接入网易七鱼客服
项目中有联系客服的功能,我们需要在微信端接入网易七鱼客服系统,记录一下使用方法. 网易七鱼客服在线连接分为服务异步加载(推荐)和服务同步加载 1.服务异步加载(推荐) 我是在react的外层htm ...
Android应用客服系统解决方案---网易七鱼客服
应用客服系统现在好多应用都有客服系统需求,常见问题可以通过智能客服解决,疑难问题可以联系人工客服实时解答.比较常见的购物应用的客服功能. 七鱼客服七鱼 Android SDK Github 网易七 ...
网易七鱼客服发起客服-触发两条会话
今天集成网易七鱼客服的时候,每次调用的时候,客服端都会收到两条会话信息这其实是同一个人来的,本来挺简单的东西,硬是搞了一天. 出现这个原因,主要是因为我们在分配客服的时候,需要为客户指定同一个客服, ...
网易服务器修改权限等级,网易七鱼客服管理_七鱼客服管理人员权限设置_企业服务汇...
编者按:网易七鱼的客服权限设置功能能够方便企业针对不同角色的客服人员分配不同的系统操作权限,客服权限的分配主要包括了对系统设置权限.数据查看范围及导出权限.功能使用权限这三大类权限的分配,其中系统设置 ...
uniapp微信公众号h5接入网易七鱼客服系统
最近用的网易七鱼客服系统,总结一下网易七鱼用代码接入网站的方法. 官网: 网易七鱼 - 服务营销一体化解决方案专家开发指南: 概述 | 开发指南 web-sdk使用的demo都可以在上图里的接入d ...
记一次网易七鱼云客服开发记录
节前一个朋友找我叫我帮他做一个微信在线客服的系统.其实微信公众号是有在线客服功能的,只是这个功能算是最基本的吧.之前我们公司使用过智齿,后来到期了就没做了.这次又有机会用第三方的客服系统就记录下来. ...
android网易七鱼客服系统
一.优点满足Web.App.微信公众号等全渠道的在线客户服务,支持客户信息展示,丰富沟通方式,超过100 项数据报表等功能 .一句话就是功能强大,聚合多个平台. 二.接入步骤: 1.在网易七鱼(ht ...
网易云商-七鱼客服使用感受
本次使用七鱼客服的体验不是很好,但是呢,遇到的问题,他们又给积极的解决了.说是不好吧,也还可以.只是给开发人员带去了不愉快. 售前咨询在七鱼客服的首页,可以点击联系客服,就会跳转到聊天界面,开始 ...
集成第三方组件--七鱼客服
背景最近做商城APP,里面需要用到客服咨询的功能,马上到网上找看有什么支持的SDK,环信.融云.网易七鱼等等,翻看了这几家的SDK文档,发现还是网易的最为友好,而且客户端的UI最为美观舒服,所以就选 ...

网易七鱼客服对接记录以及Vue项目里使用

网易七鱼客服对接记录以及Vue项目里使用相关推荐

最新文章

热门文章