yml2213
9485c28abd
- 会话创建时按负载自动分配在线客服，无客服则进入离线模式 - 新增 /api/widget/leave-message 沉淀联系方式与留言事件 - 访客端离线留言表单；工作台展示离线留言/自动分配事件 - 提供 public/widget.js + /widget/embed 嵌入方案
46 lines
2.2 KiB
TypeScript
46 lines
2.2 KiB
TypeScript
import VisitorChat from '@/widgets/VisitorChat'
|
|
|
|
const WidgetPreview = () => {
|
|
const origin = typeof window !== 'undefined' ? window.location.origin : 'https://your-host'
|
|
|
|
return (
|
|
<div className="min-h-screen bg-neutral-100 relative overflow-hidden">
|
|
<div className="max-w-[960px] mx-auto px-6 py-10 opacity-40 select-none pointer-events-none">
|
|
<div className="h-10 w-3/5 bg-neutral-200 rounded mb-4" />
|
|
<div className="h-4 w-[90%] bg-neutral-200 rounded mb-3" />
|
|
<div className="h-4 w-3/4 bg-neutral-200 rounded mb-6" />
|
|
<div className="flex gap-4 mb-6">
|
|
<div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
|
|
<div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
|
|
<div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
|
|
</div>
|
|
<div className="h-4 w-[85%] bg-neutral-200 rounded mb-3" />
|
|
<div className="h-4 w-[70%] bg-neutral-200 rounded mb-3" />
|
|
<div className="h-[200px] w-full bg-neutral-200 rounded-lg" />
|
|
</div>
|
|
|
|
<div className="absolute top-6 left-1/2 -translate-x-1/2 w-full max-w-xl px-4 pointer-events-auto">
|
|
<div className="bg-white/95 backdrop-blur border border-neutral-200 rounded-xl shadow-sm p-4">
|
|
<h1 className="text-base font-semibold text-neutral-800 m-0 mb-1">访客 Widget 预览</h1>
|
|
<p className="text-xs text-neutral-500 m-0 mb-3">
|
|
右下角为聊天组件。任意站点可嵌入下方脚本（iframe 版 SDK）。
|
|
</p>
|
|
<pre className="m-0 text-[11px] leading-relaxed bg-neutral-50 border border-neutral-100 rounded-lg p-3 overflow-x-auto text-neutral-700 whitespace-pre-wrap">
|
|
{`<script src="${origin}/widget.js" data-id="WK_8a3f2e"></script>`}
|
|
</pre>
|
|
<p className="text-[11px] text-neutral-400 mt-2 mb-0">
|
|
也可打开独立嵌入页：
|
|
<a className="text-blue-600 ml-1" href="/widget/embed?channel_key=WK_8a3f2e&embedded=1" target="_blank" rel="noreferrer">
|
|
/widget/embed
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<VisitorChat defaultOpen channelKey="WK_8a3f2e" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WidgetPreview
|