接入说明
获取接入脚本代码
- 在管理端获取接入代码
管理后台 -> 在线客服 -> 设置 -> 在线接入-> 网站 -> 接入代码
- 管理端可以实现如下入口配置：
- 三种访客端入口挂件模式
- 三种访客端对话框打开方式
- 自定义配置多个访客端对话框模板，包括颜色、欢迎语等；如需配置每个链接打开的对话框，参考 自定义样式 一节
参数说明
| 名称 | 类型 | 必需 | 说明 |
|---|---|---|---|
| templateId | number | 否 | 自定义配置多个会话邀请模板，包括底图、接入会话触发动作等（如需会话邀请模板关联某个对话框样式模板，请使用会话邀请模板的高级自定义功能，将“接受邀请”的操作设置指向某个对话框模板） |
| shuntId | number | 否 | 多入口分流支持配置多套模版，代码指定模版id后则按照该指定的规则进行访客分流 |
| sessionInvite | boolean | 否 | 是否开启会话邀请设置（默认开启）(开启会话邀请设置后，在管理端(在线系统-会话流程-会话邀请)中配置的自动邀请才会生效。若接入代码手动指定sessionInvite=false(关闭)，则自动邀请永远不会触发) |
| hidden | number | 否 | 是否隐藏访客端默认入口 0 = 不隐藏，1 = 隐藏；默认是 0 |
| sdkTemplateId | number | 否 | 自定义访客端样式模版的 id |
npm接入方式[推荐]
- 安装依赖
npm install @neysf/qiyu-web-sdk --save- 使用说明
import YSF from '@neysf/qiyu-web-sdk';
/**
* 第一个参数是您企业的appKey
* 第二个参数是配置，可选参数及含义见第一部分“基本接入配置-参数说明”表
*/
YSF.init('${这里是您企业的appKey}', {
sdkTemplateId: 123,
templateId: 123,
shuntId: 123,
sessionInvite: false,
hidden: 1
}, 'overseas').then(ysf => {
ysf('open');
}).catch(error => {
console.log('sdk加载失败---', error);
});以上样例是最简单的七鱼接入，访客访问页面时会在页面右下角出现访问客服的入口（由 JavaScript 实现，按钮样式可在后台配置），点击后会进入客服聊天页面（聊天页面有三种样式：浮层、新标签、新页面，也可以在后台配置）。如果需要自定义客服按钮，可以参考（访客端自定义） 。
- 参数说明
| 名称 | 类型 | 必需 | 说明 |
|---|---|---|---|
| 第一个参数(appKey) | string | 是 | 企业 appKey |
| 第二个参数(配置) | object | 否 | sdk 入口配置，可选参数及含义见第一部分“基本接入配置-参数说明”表 |
| 第三个参数(配置) | string | 否 | 普通企业不需要传，海外版本企业传字符串 'overseas' |
服务加载方式
- 服务异步加载方式
在您网站的 HTML 源代码中加入下述 JavaScript 脚本代码：
<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;
// 在js脚本地址后面可以加上参数来控制访客端的行为，可选参数及含义见第一部分“基本接入配置-参数说明”表
j.src = 'https://qiyukf.com/script/${这里是您企业的appKey}.js?templateId=123&shuntId=123&sessionInvite=false&hidden=1';
d.body.appendChild(j);
})(window, document, 'ysf');
</script>- 服务同步加载方式
在您网站的 HTML 源代码中加入下述 JavaScript 脚本代码
// 在js脚本地址后面可以加上参数来控制访客端的行为，可选参数及含义见第一部分“基本接入配置-参数说明”表
<script src="https://qiyukf.com/script/${这里是您企业的appKey}.js?templateId=123&shuntId=123&sessionInvite=false&hidden=1"></script>- 初始化 SDK
- 七鱼 web sdk 会在加载完成后自动进行初始化，可以通过代码设置初始化成功(onready)的回调
- 如果在 sdk 初始化完成之前设置回调，则设置的回调函数会等待 sdk 初始化完成后执行；如果在sdk初始化完成后进行设置，则回调函数会立即执行
- 示例代码：
ysf('onready', function() {
// todo
console.log('sdk ready');
});常见问题
- webview 嵌入问题
- Q: 在移动端应用中使用 webview 嵌入七鱼 sdk 报错，无法正常打开咨询页面
- A：请确保 webview 打开了 localStorage 功能
- Q：在微信环境中打开提示非微信官方网页，请确认是否继续访问
- A： 点击继续访问可以正常访问，或者参考 H5 在微信环境中常见问题
- SDK_LOAD_ERROR 或者 403 Forbidden 报错
- Q：在使用 YSF.init 方法时报错 SDK_LOAD_ERROR 或者 403 Forbidden
- A：在使用 npm 包的时候可能会报 SDK_LOAD_ERROR 的错误，这是因为给接入代码设置了“设定接入域名白名单”，并且您当前访问的域名不在该白名单内，把您当前访问的完整域名加入到白名单内即可。注意添加的是完整的域名（包括http协议也要写上），比如访问的是 https://abc.example.com/xyz，即填写的就是 https://abc.example.com，不能是 https://example.com。配置位置：管理后台 -> 在线客服 -> 设置 -> 在线接入-> 网站 -> 接入代码 -> 设定接入域名白名单 按钮。
这篇文档有帮助吗？