自定义样式

入口自定义

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

  1. 关闭七鱼默认提供的客服入口(全局性操作,关闭后所有引用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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?hidden=1';
        d.body.appendChild(j);
    })(window, document, 'ysf');
    

聊天窗口自定义

ysf('open')

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

输入参数说明:

参数 类型 描述
options Object 企业配置信息
options.templateId Number 对话框样式模板标识

使用范例

ysf('open', {
	templateId:123
});
  1. 企业开发者配置对话框样式模板

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

注意,如果你在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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?sdkTemplateId=4463292';
    d.body.appendChild(j);
})(window, document, 'ysf');

聊天窗口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 = 'http://qiyukf.com/script/044865c94981c048609d5c94c1ae9c6d.js?hiddden=1';
        d.body.appendChild(j);
    })(window, document, 'ysf');
    document.getElementById('online-service').onclick = function(){
        location.href = ysf('url');
    };
</script>