# 在线工具条对接
# 概述
七鱼在线工具条是七鱼提供的一款在线客服工具,接入方可以将在线工具条嵌入到自己的网站中,实现在线客服功能。
七鱼侧提供 Api 接口,方便接入方可以和七鱼客服工作台实现交互。
# 客服工具条新消息提醒
# 背景
浏览器的系统消息使用的是原生的 Notification api, 工具条是跨域的 iframe 内嵌到浏览器页面内,因此内部直接调用 Notification 会不生效, 导致工具条没有系统通知的功能。
针对 iframe 内嵌的工具条场景,需要七鱼侧通过 postMessage 的方式通知接入方,接入方再调用 Notification 接口弹出系统通知。
# 对接方案
七鱼侧的业务代码内在需要提示系统消息的地方全部对外使用 postMessage 的方式通讯
const options = {
body: message,
id: sessionId,
icon: ICON_URL,
rurl: `${kefuPathPrefix}/?id=${sessionId}`,
};
window.parent.postMessage({
method: 'showNotification',
params: {
title: title,
config: config
}
}, '*');
工具条的客户接入方监听内部的消息,并识别对应的方法是 showNotification 就直接调用系统通知弹出来即可
以下实例代码处理了监听通知过来之后弹系统消息、系统消息排队、超时关闭、点击关闭、以及点击消息窗口获焦的逻辑,可作为接入参考
window.addEventListener('message', (evt) => {
const data = evt.data;
const nQueue = [];
if (data?.method === 'showNotification') {
const cache = {
id:config.id,
notify: new Notification(data.title, data.config)
};
// remove first notify
if (nQueue.length>=3){
var cch = nQueue.shift();
if (cch){
cch.notify.close();
}
}
nQueue.push(cache);
cache.timer = window.setTimeout(
() => {
cache.notify.close();
},20000
);
cache.notify.onclose = () => {
window.clearTimeout(cache.timer);
const index = nQueue.indexOf(cache);
if (index>=0){
nQueue.splice(index,1);
}
};
cache.notify.onclick = () => {
window.focus();
cache.notify.close();
};
}
});