这篇文章就真的web端npm方式接入做说明
1.安装依赖
$ npm install @neysf/qiyu-web-sdk --save
在项目中进入七鱼会话的包
import YSF from '@neysf/qiyu-web-sdk';
2.初始化
import YSF from '@neysf/qiyu-web-sdk';
/**
* 第一个参数是 企业 appkey
* 第二个参数是 配置参数
*/
YSF.init('xxxxxxxx这里填写企业appKey').then(ysf => {
ysf('open');
}).catch(error => {
console.log('sdk加载失败---', error);
});
这里其实可以封装起来，因为提供了很多方法
// API API说明
// ysf('onready', callback) 设置sdk初始化成功回调
// ysf('config', options) 设置用户信息、分流信息
// ysf('product', info) 设置商品链接
// ysf('logoff') 用户登出
// ysf('open', options) 打开客服聊天窗口
// ysf('url') 获取打开聊天窗口的URL地址
// ysf('onunread', callback) 设置未读消息通知回调
// ysf('getUnreadMsg') 获取当前未读消息
// ysf('getConversation', callback) 获取会话列表
// ysf('onConversation', callback) 设置会话列表新消息通知回调，返回列表
// ysf('onSessionMessage', callback) 设置会话列表新消息通知回调，返回新消息
// #
// ysf('config', options)
// 配置企业及用户信息，嵌入七鱼客服SDK后可直接配置这些信息
// 输入参数说明：
// 参数 类型 描述
// options Object 企业配置信息
// options.uid String 企业当前登录用户标识，不传表示匿名用户
// options.name String 企业当前登录用户名称
// options.email String 企业当前登录用户邮箱
// options.mobile String 企业当前登录用户手机号
// options.bid String 当企业版本为平台版本的时候，用于指定咨询商户客服的商户id
// options.data String 企业当前登录用户其他信息，JSON字符串，其中 avatar 字段用于设置访客头像
// options.staffid String 指定客服id
// options.groupid String 指定客服组id
// options.shuntId String 访客选择多入口分流模版id
// options.robotShuntSwitch Number 机器人优先开关（访客分配）
// options.level Number 企业当前登录用户vip等级
// options.qtype Number 企业常见问题模板id
// options.welcomeTemplateId Number 企业欢迎语模板id
// options.success Function 配置成功回调
// options.error Function 配置失败回调
// options.connectYunxin Boolean 配置sdk连接云信服务，限平台企业使用
// options.wxworkAppId String 配置企业微信id，用于语音功能，该字段需要进行加密，加密方式采用AES加密,加密代码参考如下实例，Aes Key为App Secret(系统管理-扩展与集成-开发者ID-AppSecret字段)，使用老的授权方式绑定的企业微信应用，需要在应用中自行设置可信域名:qiyukf.com
// options.spkf Number 主动发起视频邀请开关
// options.isShowBack Number 导航头是否显示返回按钮（浮层模式设置无效）0:不显示 1:显示 不传不显示
// options.language String 配置当前接入的语言
3.发送商品卡片
// ysf('product', {
// show : 1, // 1为打开， 其他参数为隐藏（包括非零元素）
// title : '标题',
// desc : '商品描述',
// picture : '商品图片地址',
// note : '备注',
// url : '跳转链接',
// success: function(){ // 成功回调
// ysf('open');
// },
// error: function(){ // 错误回调
// // handle error
// }
// })
具体效果如下图所示
以上是七鱼客服的基本用法，基本上可以满足大部分需求
4.微信小程序内嵌H5注意事项
在微信小程序内嵌H5都需要做第三方域名的配置
当直接配置七鱼客服域名的时候会出现一种情况
这时候要启用二级域名，官方文档并没有仔细说明这种二级域名的启用方式，这边其实很简单 只需要在我们的init的方法里新增一个参数
然后在微信小程序里加入二级域名，注意不是七鱼的域名，是带前缀的 如果 xxxxxx.qiyukf.com
这样你会发现实际访问的客服链接就是二级域名的
