自定义样式

入口自定义

七鱼客服的系统默认入口是放在页面右下角。如果企业需要自定义入口，可以进行如下操作步骤：

关闭七鱼默认提供的客服入口（全局性操作，关闭后所有引用JS的页面都不会出现默认入口）具体操作如下：

管理后台-> 服务中心 -> 在线系统 -> 设置 -> 在线接入 -> 网站 -> 访客开关，设置停用

还有一个可以针对单个页面进行隐藏的配置，即在引入JS时添加hidden=1参数来隐藏当前页面的默认入口

代码示例

(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/xxx.js?hidden=1'; // xxx 为七鱼 appkey
    d.body.appendChild(j);
})(window, document, 'ysf');

聊天窗口自定义

ysf('open')

1、在引入七鱼SDK时会自动应用企业后台设置的接入配置，打开聊天窗口时直接调用open接口即可，聊天窗口会以后台设置的模式打开。或者通过传入templateId应用自定义配置的对话框样式。

输入参数说明：

名称	类型	说明
options	object	企业配置信息
options.templateId	number	对话框样式模板标识
options.language	string	访客端接入语言，支持的语言见概述->语言参数说明

代码示例

ysf('open', {
  templateId: 123,
  language: 'en'
});

企业开发者配置对话框样式模板

在页面上配置按钮，并在用户点击时响应事件，调用WEB-SDK的ysf('open')API接口打开聊天窗口（也可以使ysf('url')获取url并直接打开） ysf('open')和ysf('url')的差别可查看接口说明中的ysf('open')接口和ysf('url')接口。

注意，如果你在sdk初始化完成之前调用ysf('open')或ysf('url')，它们将无法被正确执行。建议结合ysf('onready')来控制调用的时机

代码示例

var isSdkReady = false;
    ysf('onready', function () {
        isSdkReady = true;
    })

    clickHandler = function () {
        if(isSdkReady) {
            ysf('open');
            // location.href = ysf('url');
        }else {
            // 仅做参考
            alert('sdk尚未加载成功，请稍后再试');
        }
    }

如果需要指定当前sdk的默认模板，可以采用直接在接入sdk后面传入参数 sdkTemplateId={模板id} 的形式。

代码示例

(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/xxx.js?sdkTemplateId=4463292'; // xxx 为七鱼 appkey
    d.body.appendChild(j);
})(window, document, 'ysf');

特别说明

若需要代码指定访客端样式模板情况下，建议 ysf('open') 和 sdkTemplateId 当中均上报指定的访客端模板 TemplateId 且保持一致

访客端入口样式，因需要提前初始化，所以仅能通过 sdkTemplateId 指定，不读取 ysf('open') 指定的 templateId，均不指定则走管理端配置

访客端打开后页面样式，ysf('open') 中设定templateId值优先于 sdkTemplateId，均不指定则走管理端配置

管理端配置：位置「在线系统设置」-「访客端」-「样式设置」-「默认生效渠道」 (见下图)，支持根据网页渠道同时配置入口和页面样式，若不配置渠道走系统默认模

默认生效渠道样式设置示例图

聊天窗口URL

ysf('url')

通过此接口可获取聊天窗口的URL地址，如果想在当前窗口打开聊天窗口可以用以下方式

注意，浮层模式下使用ysf('url')得到的url可能与你的期望不同，建议仅在标签和弹窗模式使用此方式

代码示例

<a href="#" id="online-service">在线客服</a>

<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/xxx.js?hidden=1'; // xxx 为七鱼 appkey
        d.body.appendChild(j);
    })(window, document, 'ysf');
    document.getElementById('online-service').onclick = function(){
        location.href = ysf('url');
    };
</script>

自定义样式

入口自定义

聊天窗口自定义

聊天窗口URL

目录