操作指引
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 交互,提升客服效率!