客服挂件应使用position: fixed定位右下角并设z-index: 9999、bottom: 20px、right: 20px；显隐用visibility+opacity+transform组合过渡；移动端适配max-width: 90vw、min-width: 280px；输入框用min-height/max-height+overflow-y；图标用内联SVG；首次加载不预加载SDK。
客服挂件要能点开收起，别卡住页面滚动
直接用 position: fixed 定位在右下角是最稳妥的，但必须加 z-index: 9999（不能只写 999，某些框架自带弹窗 z-index 超过 1000），同时设置 bottom: 20px 和 right: 20px 避免遮挡浏览器原生滚动条。如果页面有 sticky 导航栏或 footer，得检查是否被遮挡——建议在 body 最末尾插入挂件 HTML，而不是塞进某个容器里。
点击按钮后弹出客服窗口，用纯 CSS 实现显隐切换
别用 JS 控制 display: none 切换，那样会破坏过渡动画。正确做法是用 visibility + opacity + transform 组合：
-
visibility: hidden控制是否参与渲染流（比display更轻量） -
opacity: 0配合transition: opacity 0.2s ease -
transform: scale(0.95)让缩放更自然，避免“硬弹”感
对应按钮的 onclick 只需切换一个 class，比如 chat-open，CSS 里写好状态映射即可，不用引入任何框架。
客服窗口内容区域要适配手机，别让文字挤成一团
移动端宽度有限，直接写死 width: 320px 不行。应该用 max-width: 90vw + min-width: 280px，再配合 padding: 12px（不是 16px，小屏下留白太多）。特别注意：输入框和发送按钮必须用 flex 布局，否则 iOS Safari 下软键盘弹起时按钮会被顶出视口——常见错误是给 textarea 加了 height: 100px，结果在 iPhone 上高度失效，改用 min-height: 80px + max-height: 140px + overflow-y: auto 才可靠。
立即学习“前端免费学习笔记（深入）”；
挂件图标别用 PNG，SVG 才能高清缩放不糊
很多团队还在用 <img src="kefu.png">，结果在 Retina 屏上发虚。直接内联 SVG 更省事、可控性强：
<svg width="48" height="48" viewBox="0 0 48 48"> <circle cx="24" cy="24" r="22" fill="#007bff"/> <text x="24" y="32" text-anchor="middle" fill="white" font-size="16">?</text> </svg>
这样既能用 CSS 改颜色（fill），也能响应式缩放，还不受跨域图片加载失败影响。如果要用自定义图标字体，确保只加载需要的字符，别引入整套 fontawesome.css 拖慢首屏。
import() 或 document.createElement('script') 加载客服逻辑——否则会影响 LCP 和 TTI 指标。 
