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

谁借莪１个温暖的怀抱￠ 2022-12-22 00:47 258阅读 0赞

**网易七鱼客服对接记录**

--------------------

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

1.第一步

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

2第二步

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70][]

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

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
        }
    });

第四步

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

--------------------

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

**自己Vue的使用方式记录**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 1][]

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

// 记录加载初始化状态
    let isSdkReady = false
    
    // 记录加载配置状态
    let isConfig = false
    
    export 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();
        }
      }

[http_help.qiyukf.com]: http://help.qiyukf.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70]: /images/20221120/c501fdb33cb646d5a4379c0c0f1c9e38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 1]: /images/20221120/724eb2d8bbca4bc29a349da5b4041d92.png