接入说明

基本接入配置

  1. 管理端获取接入代码

管理后台-> 应用->在线系统-> 设置->在线接入->网站->接入代码

  1. 完整页面实例展示

	<!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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js';
                    d.body.appendChild(j);
                })(window, document, 'ysf');
            </script>
	        <!-- YOUR CODE HERE -->
	    </body>
	</html>

以上样例是最简单的七鱼接入,访客访问页面时会在页面右下角出现访问客服的入口(由JS实现,按钮样式可在后台配置),点击后会进入客服聊天页面(聊天页面有三种样式:浮层、新标签、新页面,也可以在后台配置)。如果需要自定义客服按钮,可以参考(访客端自定义) 。

  1. 管理端可以实现如下入口配置:

    1. 三种访客端入口挂件模式
    2. 三种访客端对话框打开方式
    3. 自定义配置多个访客端对话框模板,包括颜色、欢迎语等;如需配置每个链接打开的对话框,参考“open接口-打开聊天窗口”一节
    4. 自定义配置多个会话邀请模板,包括底图、接入会话触发动作等,示例如下(如需会话邀请模板关联某个对话框样式模板,请使用会话邀请模板的高级自定义功能,将“接受邀请”的操作设置指向某个对话框模板):

	<!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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?templateId=123';
                    d.body.appendChild(j);
                })(window, document, 'ysf');
            </script>
	        <!-- templateId表示自定义会话邀请的模板标识 -->
	        <!-- YOUR CODE HERE -->
	    </body>
	</html>

如需会话邀请模板关联某个对话框样式模板,请使用会话邀请模板的高级自定义功能,将“接受邀请”的操作设置指向某个对话框模板。

  1. 多入口分流支持配置多套模版,代码指定模版id

	<!DOCTYPE html>
	<html>
	    <head>
	        <title>自定义配置访客选择多入口分流模版id</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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?shuntId=123';
                    d.body.appendChild(j);
                })(window, document, 'ysf');
            </script>
	        <!-- shuntId表示访客选择多入口分流模版id -->
	        <!-- YOUR CODE HERE -->
	    </body>
	</html>

  1. 是否开启会话邀请设置(默认开启)

	<!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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?sessionInvite=false';
                    d.body.appendChild(j);
                })(window, document, 'ysf');
            </script>
	        <!-- sessionInvite表示是否开启会话邀请设置 -->
	        <!-- YOUR CODE HERE -->
	    </body>
	</html>

开启会话邀请设置后,在管理端(在线系统-会话流程-会话邀请)中配置的自动邀请才会生效。若接入代码手动指定sessionInvite=false(关闭),则自动邀请永远不会触发

初始化SDK

  1. 七鱼web sdk会在加载完成后自动进行初始化,可以通过代码设置初始化成功(onready)的回调

  2. 如果在sdk初始化完成之前设置回调,则设置的回调函数会等待sdk初始化完成后执行;如果在sdk初始化完成后进行设置,则回调函数会立即执行

示例代码:

	ysf('onready', function() {
        // todo
        console.log('sdk ready');
    });

常见问题

1、webview嵌入问题

Q: 在移动端应用中使用webview嵌入七鱼sdk报错,无法正常打开咨询页面

A:请确保webview打开了localstorage功能