# 接入说明
# 基本接入配置
- 管理端获取接入代码
管理后台 -> 服务中心 -> 在线系统 -> 设置 -> 在线接入-> 网站 -> 接入代码
管理端可以实现如下入口配置:
- 三种访客端入口挂件模式
- 三种访客端对话框打开方式
- 自定义配置多个访客端对话框模板,包括颜色、欢迎语等;如需配置每个链接打开的对话框,参考“open接口-打开聊天窗口”一节
- templateId 自定义配置多个会话邀请模板,包括底图、接入会话触发动作等(如需会话邀请模板关联某个对话框样式模板,请使用会话邀请模板的高级自定义功能,将“接受邀请”的操作设置指向某个对话框模板)
- shuntId 多入口分流支持配置多套模版,代码指定模版id
- sessionInvite 是否开启会话邀请设置(默认开启)(开启会话邀请设置后,在管理端(在线系统-会话流程-会话邀请)中配置的自动邀请才会生效。若接入代码手动指定sessionInvite=false(关闭),则自动邀请永远不会触发)
- hidden 是否隐藏访客端默认入口
# 服务异步加载方式
- 基础配置
<!DOCTYPE html>
<html>
<head>
<title>在线客服</title>
<meta charset="utf-8"/>
</head>
<body>
<script>
(function (w, d, n, a, j) {
w[n] = w[n] || function () {
return (w[n].a = w[n].a || []).push(arguments)
};
j = d.createElement('script');
j.async = true;
j.src = 'https://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js';
d.body.appendChild(j);
})(window, document, 'ysf');
</script>
<!-- YOUR CODE HERE -->
</body>
</html>
- 传入配置
<!DOCTYPE html>
<html>
<head>
<title>自定义配置会话邀请模板</title>
<meta charset="utf-8"/>
</head>
<body>
<script>
(function (w, d, n, a, j) {
w[n] = w[n] || function () {
return (w[n].a = w[n].a || []).push(arguments)
};
j = d.createElement('script');
j.async = true;
j.src = 'https://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?templateId=123&shuntId=123&sessionInvite=false&hidden=1';
d.body.appendChild(j);
})(window, document, 'ysf');
</script>
<!-- templateId表示自定义会话邀请的模板标识 -->
<!-- shuntId表示访客选择多入口分流模版id -->
<!-- sessionInvite表示是否开启会话邀请设置 -->
<!-- hidden表示是否隐藏访客端默认入口 -->
<!-- YOUR CODE HERE -->
</body>
</html>
# npm接入方式
- 安装
$ npm install @neysf/qiyu-web-sdk --save
- 页面使用
2.1 基础配置
import YSF from '@neysf/qiyu-web-sdk';
/**
* 第一个参数是 企业 appkey
* 第二个参数是 配置参数
*/
YSF.init('044865c94981c048609d5c94c1ae9c6d').then(ysf => {
ysf('open');
}).catch(error => {
console.log('sdk加载失败---', error);
});
2.2 传入配置
import YSF from '@neysf/qiyu-web-sdk';
/**
* 第一个参数是 企业 appkey
* 第二个参数是 配置参数
*/
YSF.init('044865c94981c048609d5c94c1ae9c6d', {
templateId: 123, // templateId表示自定义会话邀请的模板标识
shuntId: 123, // shuntId表示访客选择多入口分流模版id
sessionInvite: false, // sessionInvite表示是否开启会话邀请设置
hidden: 1 // hidden表示是否隐藏访客端默认入口
}).then(ysf => {
ysf('open');
}).catch(error => {
console.log('sdk加载失败---', error);
});
以上样例是最简单的七鱼接入,访客访问页面时会在页面右下角出现访问客服的入口(由JS实现,按钮样式可在后台配置),点击后会进入客服聊天页面(聊天页面有三种样式:浮层、新标签、新页面,也可以在后台配置)。如果需要自定义客服按钮,可以参考(访客端自定义) 。
- 参数说明
字段 | 类型 | 说明 | 必须 |
---|---|---|---|
第一个参数(appkey) | String | 企业 appkey | 是 |
第二个参数(配置) | Object | sdk 入口配置 | 否 |
第三个参数(配置) | String | 普通企业不需要传,海外版本企业:'overseas' | 否 |
# 初始化SDK
七鱼web sdk会在加载完成后自动进行初始化,可以通过代码设置初始化成功(onready)的回调
如果在sdk初始化完成之前设置回调,则设置的回调函数会等待sdk初始化完成后执行;如果在sdk初始化完成后进行设置,则回调函数会立即执行
示例代码:
ysf('onready', function() {
// todo
console.log('sdk ready');
});
# 常见问题
1、webview嵌入问题
Q: 在移动端应用中使用webview嵌入七鱼sdk报错,无法正常打开咨询页面
A:请确保webview打开了localstorage功能