# 接入说明

# 基本接入配置

管理端获取接入代码

管理后台 -> 服务中心 -> 在线系统 -> 设置 -> 在线接入-> 网站 -> 接入代码

管理端可以实现如下入口配置：
1. 三种访客端入口挂件模式
2. 三种访客端对话框打开方式
3. 自定义配置多个访客端对话框模板，包括颜色、欢迎语等；如需配置每个链接打开的对话框，参考“open接口-打开聊天窗口”一节
4. templateId 自定义配置多个会话邀请模板，包括底图、接入会话触发动作等（如需会话邀请模板关联某个对话框样式模板，请使用会话邀请模板的高级自定义功能，将“接受邀请”的操作设置指向某个对话框模板）
5. shuntId 多入口分流支持配置多套模版，代码指定模版id
6. sessionInvite 是否开启会话邀请设置（默认开启）(开启会话邀请设置后，在管理端(在线系统-会话流程-会话邀请)中配置的自动邀请才会生效。若接入代码手动指定sessionInvite=false(关闭)，则自动邀请永远不会触发)
7. 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功能

← 概述 CRM对接 →