「操作指引」如何在 Framer 安装 3Chat 即时聊天
1.全文概述
适用平台：Framer
本指南将帮助您快速将 3Chat AI 客服接入您在 Framer 平台的自建网站，让顾客通过聊天窗口发起咨询，提升转化率和客户满意度。
如果您还不是 3Chat 的用户，请前往
3Chat
开通账号，您能够获得 7 天免费试用福利。如果在试用期间，您对我们的功能产生了浓厚的兴趣，订阅成长版套餐后，您将获得最优的功能体验。
2.安装前的准备工作
在开始之前，请确保：
✅
您已登录 Framer 并且已搭建好自己的网站
3.操作步骤
3.1 获取3Chat安装代码
登录3Chat后台，在左侧导航栏依次点击【渠道】→ 【即时聊天】→ 【自定义官网安装】
点击复制代码片段
3.2 进入Framer代码编辑器并将3Chat代码导入
进入Framer编辑页面
点击Home的编辑图标，并点击【设置（Settings）】
在设置界面点击左侧【通用设置（General）】
在此页面底部找到【定制代码（Custom Code）】部分，将第一步复制的3Chat聊天工具代码复制入【End of <body> tag】部分
点击【保存（Save）】，即可生效。
3.3 验证聊天插件生效
如果生效，您的网站右下角将会出现3chat聊天图标，请点击图标，测试交互是否成功。如能流畅收发信息，则视为成功。
4.常见问题
❓ 嵌入代码后页面样式错乱？
原因：CSS选择器冲突
解决方案：
1在3Chat代码外添加容器 <div id="3chat-container">...</div>
自定义CSS隔离：css #3chat-container * { all: unset; /* 重置继承样式 */ }
❓ 移动端按钮点击无响应？
关闭Framer的 「交互预览」 模式（发布正式版测试）
检查是否启用 「手势冲突」 类动画组件
5.进一步支持
如需帮助，可联系：
📧
3Chat 客服支持：
3Chat@xinheyun.com
📞
Framer技术支持
：
Framer
内进入
Help Center
，可获取多种帮助，可与Framer客服进行联系
6.最后
✅
恭喜！您已成功将 3Chat 智能客服接入Framer构建的网站！
现在，您的客户可以通过
您的Framer构建的网站
直接与 3Chat 交互，提升客服效率！