yml2213
9485c28abd
- 会话创建时按负载自动分配在线客服，无客服则进入离线模式 - 新增 /api/widget/leave-message 沉淀联系方式与留言事件 - 访客端离线留言表单；工作台展示离线留言/自动分配事件 - 提供 public/widget.js + /widget/embed 嵌入方案
101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
/**
|
|
* 客服云访客 Widget 嵌入脚本
|
|
* 用法: <script src="https://your-host/widget.js" data-id="WK_xxxx"></script>
|
|
*/
|
|
(function () {
|
|
if (window.__KEFU_WIDGET_LOADED__) return;
|
|
window.__KEFU_WIDGET_LOADED__ = true;
|
|
|
|
var script = document.currentScript;
|
|
if (!script) {
|
|
var scripts = document.getElementsByTagName('script');
|
|
script = scripts[scripts.length - 1];
|
|
}
|
|
var channelKey = (script && script.getAttribute('data-id')) || '';
|
|
if (!channelKey) {
|
|
console.warn('[kefu-widget] missing data-id on script tag');
|
|
return;
|
|
}
|
|
|
|
var src = script && script.src ? script.src : '';
|
|
var base = '';
|
|
try {
|
|
var u = new URL(src, window.location.href);
|
|
base = u.origin;
|
|
} catch (e) {
|
|
base = window.location.origin;
|
|
}
|
|
|
|
var open = false;
|
|
var iframe = null;
|
|
|
|
var btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.setAttribute('aria-label', '打开在线客服');
|
|
btn.style.cssText = [
|
|
'position:fixed', 'right:24px', 'bottom:24px', 'z-index:2147483000',
|
|
'width:56px', 'height:56px', 'border:none', 'border-radius:9999px',
|
|
'background:#2563eb', 'color:#fff', 'cursor:pointer',
|
|
'box-shadow:0 8px 24px rgba(0,0,0,0.12)',
|
|
'display:flex', 'align-items:center', 'justify-content:center',
|
|
'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif',
|
|
].join(';');
|
|
btn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
|
|
|
|
var panel = document.createElement('div');
|
|
panel.style.cssText = [
|
|
'position:fixed', 'right:24px', 'bottom:24px', 'z-index:2147483001',
|
|
'width:400px', 'height:600px', 'max-width:calc(100vw - 32px)', 'max-height:calc(100vh - 32px)',
|
|
'border-radius:12px', 'overflow:hidden',
|
|
'box-shadow:0 8px 24px rgba(0,0,0,0.12)',
|
|
'display:none', 'background:#fff',
|
|
].join(';');
|
|
|
|
function ensureIframe() {
|
|
if (iframe) return;
|
|
iframe = document.createElement('iframe');
|
|
iframe.title = '在线客服';
|
|
iframe.allow = 'clipboard-write';
|
|
iframe.style.cssText = 'width:100%;height:100%;border:0;display:block;background:#fff;';
|
|
iframe.src = base + '/widget/embed?channel_key=' + encodeURIComponent(channelKey) + '&embedded=1';
|
|
panel.appendChild(iframe);
|
|
}
|
|
|
|
function setOpen(next) {
|
|
open = next;
|
|
if (open) {
|
|
ensureIframe();
|
|
panel.style.display = 'block';
|
|
btn.style.display = 'none';
|
|
} else {
|
|
panel.style.display = 'none';
|
|
btn.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
btn.addEventListener('click', function () { setOpen(true); });
|
|
|
|
window.addEventListener('message', function (event) {
|
|
if (!event || !event.data) return;
|
|
if (event.data.type === 'kefu-widget-close' || event.data.type === 'kefu-widget-minimize') {
|
|
setOpen(false);
|
|
}
|
|
});
|
|
|
|
function mount() {
|
|
document.body.appendChild(btn);
|
|
document.body.appendChild(panel);
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', mount);
|
|
} else {
|
|
mount();
|
|
}
|
|
|
|
window.KefuWidget = {
|
|
open: function () { setOpen(true); },
|
|
close: function () { setOpen(false); },
|
|
channelKey: channelKey,
|
|
};
|
|
})();
|