web端七鱼客服接入

概述

本文介绍的仅仅是Web端七鱼客服接入的分享，当然他也支持多端接入七鱼客服多端接入，公司接入了很多次的七鱼客服，下面的代码是copy过来的成型代码

官方API链接 Web端七鱼客服接官方API

接入步骤

1. 建个Qiyukefu.ts文件，放入引入七鱼客服的代码

function initQiyukf() {
  // 接入七鱼客服
  ;(function(w: any, d, n, a) {
    w[n] =
      w[n] ||
      function() {
        ;(w[n].a = w[n].a || []).push(arguments)
      }
    const j = d.createElement('script')
    j.async = true
    j.src = 'https://qiyukf.com/script/e7172fc844d88cd3ae196678ea38da5e.js?hidden=1'
    d.body.appendChild(j)
  })(window, document, 'ysf')
 
  // 默认不轮询客服消息
  ;(window as any).ysf('config', {
    noUnreadPolling: true,
  })
}
 
export default initQiyukf

2. 在需要接入客服的页面Qiyukefu.ts，并执行这个方法

import initQiyukf from 'xxxl/Qiyukefu.ts'
!window.ysf && initQiyukf() 

3. 接入了七鱼客服后，做初始化的项配置，

handleCustomerServiceClick是我们自定义的点击某个DOM元素，打开客服聊天窗口，根据产品的设计来看是否需要此click监听函数

// 在2后面直接方这行代码
this.initConfig()
 
// 这两个方法放在methods里面
 
// 初始化七鱼客服配置
  initConfig() {
    const { user } = this.$store.state
    window.ysf('config', {
      uid: (user.base && (user.base.guid || user.base.ouid)) || '',
      noUnreadPolling: false,
      groupid: '397661416', // 客服组ID
      data: JSON.stringify([
        { key: 'real_name',  '' }, // 姓名
        { key: 'mobile_phone','' }, // 手机号
        { key: 'email', value:  '' }, // 邮箱
      ]),
    })
  },
 
 
  // 打开客服弹窗
  handleCustomerServiceClick() {
    const { user } = this.$store.state
 
    // 登出客服系统
    window.ysf('logoff')
    window.ysf('open', {
      uid: (user.base && (user.base.guid || user.base.ouid)) || '', // 用户ID
      groupid: '397661416', // 客服组ID
      data: JSON.stringify([
        { key: 'real_name',  '' }, // 姓名
        { key: 'mobile_phone',  '' }, // 手机号
        { key: 'email', value:  '' }, // 邮箱
        { key: 'address', value: '' }, // 地址
        { type: 'crm_param', key: '', value: '' }, // 自定义字段(sourceType): USER - 注册用户; PURCHASER - 管理员录入
      ]),
    })
  },

注意事项

1. 接入的时候要和产品，确定接入的客服组id（groupid）是什么，因为一个公司有很多个客服组，接入的客服要根据产品的性质，来方便用户也就是我们的上帝，直接与专业人员取得直接的联系！
2. 姓名、手机号......，有就传入没有就不传入，不是必要项，不必纠结！
3. 不用尝试将ysf不挂在到window上，这样是没用的，因为源码的ysf就是直接写在window上的而且也没有定义，所以ysf智能找到window上，就问你源码刚不刚，如图：