如何在 Framer 安装 3Chat 即时聊天

如何在 Framer 安装 3Chat 即时聊天

如何在 Framer 安装 3Chat 即时聊天

操作指引

如何在-framer-安装-3chat-即时聊天

2025年7月1日

2025年7月1日

2025年7月1日

2025年7月1日

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. 1在3Chat代码外添加容器 <div id="3chat-container">...</div>  

  2. 自定义CSS隔离:

    css   #3chat-container * {    all: unset; /* 重置继承样式 */   }

❓ 移动端按钮点击无响应?
  • 关闭Framer的 「交互预览」 模式(发布正式版测试)

  • 检查是否启用 「手势冲突」 类动画组件

5.进一步支持

如需帮助,可联系:

📧 3Chat 客服支持:3Chat@xinheyun.com

📞 Framer技术支持Framer内进入Help Center,可获取多种帮助,可与Framer客服进行联系

6.最后

恭喜!您已成功将 3Chat 智能客服接入Framer构建的网站!

现在,您的客户可以通过 您的Framer构建的网站 直接与 3Chat 交互,提升客服效率!

联系我们!

联系我们!

联系我们!

地址

徐汇区 古美路1528号A6栋10层
总部·上海市

分部·新加坡·广州·成都·杭州·合肥·南京·石家庄

© 2025, 3Chat Inc - All rights reserved.上海纽酷信息科技有限公司 沪ICP备18014720号 - 10