开发指南

# 自定义样式

# 入口自定义

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

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

← 会话消息 →