客服封装组件

配置方式

import Vue from 'vue';
// 按需引入
import { Service } from '@polyv/polyv-ui';
// 修改默认配置时可传入对象：{ serviceType, zhichiConfig, udeskConfig }
Vue.use(Service);

// 全局引入
import PolyvUI from '@polyv/polyv-ui';
Vue.use(PolyvUI, {
  // 修改默认配置时可传入对象：{ serviceType, zhichiConfig, udeskConfig }
  Service: {
    serviceType: 'Zhichi', // 客服类型名称，可选：'Zhichi'，'UDesk'
    zhichiConfig: {}, // 智齿配置
    udeskConfig: {}, // udesk配置
  }
});

/**
 * 初始化并传入用户信息,使用智齿客服时必须传入参数
 */
this.$Service.init({
  userName: 'xxx', // 用户名称
  userPhone: 'xxx', // 电话
  userQq: 'xxx', // QQ
  userEmail: 'xxx@polyv.net', // 邮箱
  userId: 'xxx', // 用户标识ID
  userRemark: 'xxx', // 备注
});

/**
 * 在Vue文件中，使用this.$Service可以调用service的方法
 */
this.$Service.init(userInfo)
this.$Service.show()
this.$Service.hide()
this.$Service.toggleVisible()

/**
 * 在非Vue文件中，引入后使用Service可以调用service的方法
 */
Service.init(userInfo)
Service.show()
Service.hide()
Service.toggleVisible()

自定义入口

<div class="service-btn">客服组件入口</div>

import PolyvUI from '@polyv/polyv-ui';
Vue.use(PolyvUI, {
  Service: {
    zhichiConfig:{
      customEnter: 'service-btn'
    },
    udeskConfig:{
      customEnter: true
    }
  }
});

Methods

方法名	说明	参数
init	初始化客服组件	userInfo
show	打开客服窗口，config传入groupId可切换客服类型（售前/售后）	config
hide	隐藏客服窗口	-

userInfo Attributes

参数	说明	类型	可选值	默认值
userName	用户名，通用属性	String	-	-
userEmail	邮箱，通用属性	String	-	-
userPhone	手机号，通用属性	String	-	-
userId	用户id，智齿属性	String	-	-
userQq	QQ号，智齿属性	String	-	-
userRemark	备注信息，智齿属性	String	-	-
userVip	用户vip识别，智齿属性	Number	0：普通客户，1：VIP客户	-
userVipLevel	用户vip id，智齿属性	String	-	-
userOrg	所属公司，UDesk属性	String	-	-
userDesc	用户描述，UDesk属性	String	-	-
userVip	用户vip识别，UDesk属性	String	'normal'：普通客户，'vip'：VIP客户	-