必须放在底部，紧贴之前；因客服sdk依赖document.body存在且dom已加载，放或中间会报appendchild of null错误，且禁用defer/async以防执行时机错乱。
客服脚本该插在
必须放在 最底部，紧贴 之前。多数客服 SDK（如智齿、美洽、环信、Tidio）依赖 document.body 存在且 DOM 已加载，提前插入 或中间位置会导致 Cannot read property 'appendChild' of null 或窗口不渲染。
实操建议：
- 不要用
defer或async加载客服脚本——它们可能异步执行，破坏 SDK 初始化顺序 - 如果页面用了前端框架（Vue/React），避免把客服 script 写在组件内动态插入；直接硬编码到 index.html 的
底部最稳妥 - 部分 SDK（如 Tidio）提供
tidioChatApi全局对象，但该对象仅在脚本加载并初始化完成后才可用；过早调用tidioChatApi.open()会静默失败
如何控制聊天窗口默认隐藏，只在用户点击后才弹出？
不能靠 CSS 隐藏 #tidio-chat 或 .zhi-chi-container——多数 SDK 会在初始化时强制重置样式，或监听 visibility 变更自动唤醒。正确方式是利用 SDK 提供的初始化配置项。
常见处理：
- 智齿：在 script 标签前加
window._szConfig = { autoShow: false }; - Tidio：初始化脚本中传入
chatButton: { hidden: true } - 美洽：设置
window.meiqia = { id: 'xxx', autoInvite: false, showButton: false } - 注意：隐藏按钮 ≠ 隐藏聊天窗口逻辑。有些 SDK 即使按钮隐藏，仍可能响应
meiqia('open')或tidioChatApi.open()调用，这点要结合文档确认
多个客服脚本共存时，window 上的全局变量会冲突吗？
会。智齿挂 window._sz，美洽用 window.meiqia，Tidio 暴露 window.tidioChatApi，环信写 window.EasemobIM——名字不同但都在全局污染，一旦两个 SDK 使用相同变量名（比如都试图定义 window.ChatSDK），后加载的会覆盖前一个，导致功能异常。
规避方法：
- 严格按官方文档推荐的 script src 地址接入，避免使用非官方 CDN 或打包进 bundle（Webpack 打包后无法保证执行时序）
- 若必须共存（如 A/B 测试不同客服），在每个脚本加载前用
delete window.xxx清理上一个 SDK 的挂载点（慎用，需测试是否影响卸载逻辑） - 优先选择支持多实例的 SDK（如最新版 Tidio 支持
init({ instanceId: 'a' })），否则共存风险高，不建议生产环境混合使用
移动端适配失效，聊天窗口被截断或无法滚动？
根本原因是 SDK 默认基于 PC 端 viewport 设计，未监听 resize 或 orientationchange，且常将窗口绝对定位在 top: 20px; right: 20px，在小屏下超出视口边界。
能做的有限但有效：
- 给
和加style="overflow-x: hidden;"，防止横向滚动条遮挡按钮 - 用媒体查询微调按钮位置：
/* 示例：iPhone X+ 右下角留出安全区 */ @media (max-width: 480px) { #tidio-chat { bottom: 34px !important; } } - 禁用 SDK 自带的“全屏模式”开关（如有），移动端全屏弹窗常与 iOS Safari 的地址栏动画冲突，导致白屏
- 真机测试比模拟器可靠得多；iOS 微信内置浏览器对
position: fixed的兼容性尤其差，必要时用position: absolute+ JS 动态计算 offsetTop
第三方客服不是“插入即用”的 UI 组件，它的生命周期、事件流和 DOM 操作深度耦合页面上下文。最常出问题的不是集成步骤，而是假设它 behaves like a normal element —— 它不。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
