必须等 document.readystate === ‘complete’ 或 window.addeventlistener(‘load’) 后再初始化，第三方脚本默认注入 body 末尾并挂全局变量，shadow dom/iframe 会阻止显示；调用 api 前需监听 ready 事件；css 覆盖 z-index 而非 display: none；通过 network 面板查 /message 请求及 referer 头确认消息发送。
怎么把第三方聊天窗口塞进 html 页面里
直接加 <script></script> 标签就能跑，但多数人卡在加载时机、样式冲突和消息收不到这三步。不是代码没贴对，而是没理清谁在控制 DOM、谁在监听事件。
- 必须等
document.readyState === 'complete'或用window.addEventListener('load', ...)再初始化，否则聊天按钮可能找不到容器 - 第三方脚本（比如 Tidio、Crisp、LiveChat）默认会往
body末尾插一个div并挂全局变量（如window.tidioChatApi），别自己再写appendChild - 如果页面用了 Shadow DOM 或 iframe 隔离，聊天窗口大概率不显示——它默认只认 light DOM
为什么聊天按钮点了没反应｜常见加载错误
最常遇到的是控制台报 ReferenceError: tidioChatApi is not defined 或 crisp.isReady is not a function。这不是 API 失效，是脚本还没执行完你就调了方法。
- 别在
里就写tidioChatApi.open()，得等tidioChatApi.on('ready', ...)触发后再操作 - Crisp 要求先
crisp.configure('your-site-id')，再crisp.load()，顺序反了会静默失败 - 某些 CDN 地址带
?v=2参数，缓存更新慢时旧版 SDK 可能不兼容新配置项，换无版本号的 URL 更稳
怎么让聊天窗口不挡住关键按钮｜CSS 干预要点
第三方 widget 默认用 position: fixed + 高 z-index，很容易盖住你的导航栏或悬浮操作按钮。不能删它的 style，但可以安全覆盖。
- 用
!important锁定#tidio-chat或.crisp-client的z-index，值设成比你主界面最高 z-index 小 1（比如你用 2100，它就设 2099） - 避免用
display: none隐藏整个窗口——这会让 SDK 认为用户离线，影响客服端状态同步 - 想隐藏按钮只留气泡？改
.tidio-chat__button的opacity和pointer-events，别动visibility
如何确认消息真的发出去了｜调试真实链路
用户说“我发了三条”，客服说“一条没收到”，问题往往出在跨域或初始化漏环，而不是网络。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器 Network 面板，过滤
XHR，找包含/message或/send的请求，看响应是 200 还是 401/403 - 检查页面
<meta name="referrer" content="no-referrer">是否存在——它会砍掉 Referer，导致部分 SaaS 后端拒绝跨站消息 - 本地开发用
file://打开 HTML？几乎所有聊天 SDK 都会拒绝加载，必须走http://localhost或部署后测试
嵌入本身很简单，难的是它和你的路由、状态管理、安全策略之间的咬合点。多一个 CSP 规则、少一个事件监听、早一毫秒调 API，都可能让窗口变成摆设。