如何在自建网站上安装 3Chat 即时聊天
适用平台：Shopify | SHOPLINE ｜ WordPress | Framer
本指南将帮助您快速将 3Chat AI 客服接入您的电商网站，让顾客通过聊天窗口发起咨询，提升转化率和客户满意度。
如果您还不是 3Chat 的用户，请前往 3Chat 开通账号，您能够获得 7 天免费试用福利。
如果在试用期间，您对我们的功能产生了浓厚的兴趣，订阅成长版套餐后，您将获得最优的功能体验。
Shopify
安装前的准备工作
在开始之前，请确保：
您已登录 Shopify 并且已经在运营一个店铺网站
确保一个 Shopify 店铺只连接一个 3Chat 空间
操作步骤
1. 获取即时聊天窗口的安装代码
-
登录 3Chat 后台，在左侧导航栏依次点击【渠道】→ 【即时聊天】→ 【自定义官网安装】
-
点击复制代码片段
2. 进入 Shopify 代码编辑器并将 3Chat 代码导入
-
进入 Shopify 后台
-
点击【在线商店（Online Store）】，选择【主题（Themes）】
-
点击当前主题左侧的【操作图标】
-
点击【编辑代码（Edit code）】
-
在左侧文件列表中找到 theme.liquid（位于 Layout 目录下）
-
将代码粘贴到
</body>标签前
-
点击【保存（Save）】，即可生效
3. 验证聊天插件生效
- 如果生效，您的网站右下角将会出现 3Chat 聊天图标
- 点击图标，测试交互是否成功。如能流畅收发信息，则视为成功
常见问题
修改主题后聊天窗口消失？
→ 原因：主题更新覆盖代码
→ 解决方案：
- 使用「主题备份」功能（操作路径：主题 → 操作 → 复制）
- 在新主题中重新注入代码
结账页面不显示按钮？
→ 检查代码是否注入「全局布局」（非特定模板）
→ 关闭「结账保护」类插件（如 Growave / Segment）临时测试
进一步支持
如需帮助，可联系：
3Chat 客服支持：contact@3Chatai.com
Shopify 技术支持：在 Shopify 内进入 Help Center，可与 Shopify 客服进行联系
最后
恭喜！您已成功将 3Chat 智能客服接入 Shopify！
现在，您的客户可以通过您的 Shopify 网站直接与 3Chat 交互，提升客服效率！
SHOPLINE
3Chat.ai 应用已上架 SHOPLINE 应用市场
安装前的准备工作
在开始之前，请确保：
您已登录 SHOPLINE 并且已经在运营一个店铺网站
确保一个 SHOPLINE 店铺只连接一个 3Chat 空间
操作步骤
1. 如果您已登陆 SHOPLINE 店铺，可以前往 SHOPLINE App Store 直接安装 3Chat.ai 应用。
2. 如果您已登陆 3Chat 空间，通过左侧菜单导航 “渠道” - “即时聊天” - “SHOPLINE”，进入 SHOPLINE 安装向导。点击页面中的 “前往 SHOPLINE 应用市场”，前往 3Chat.ai 应用页面。
3. 在 3Chat.ai 应用页面点击安装，会跳转店铺授权页，勾选同意授权后，点击 “授权并安装”
4. 完成店铺授权安装后，会跳转 3Chat 的登陆页面。如果您已经有 3Chat 空间，可以直接登陆您的账号。如果没有注册 3Chat 空间，可以点击 “注册” 进入注册页面，完成 3Chat 空间开通。
5. 进入空间后，会邀请您选择一个空间进行绑定，如果您的账号关联了多个 3Chat 空间，会展示所有空间功能选择。
6. 选择绑定的空间后，会自动跳转 SHOPLINE 的安装向导页。接下来需要您完成三个步骤：
- 第一步：点击 “前往 SHOPLINE 主题编辑器”，进入店铺后台，点击 “设计”，进入店铺的主题编辑页面
- 第二步：在店铺编辑页中，点击左侧导航中的 “应用嵌入” 图标，在页面最右侧能够找到所有安装的应用，在这里找到 3Chat.ai 的 Chat Widget，保持开关 “开启”，您就会在下方找到我们的即时聊天的组件。
- 第三步：保存店铺，前往您的店铺主页，点开即时聊天窗口，或者直接在主题编辑页打开即时聊天窗口，完成链接。查看 3Chat 空间的 SHOPLINE 安装向导页，展示已成功接入的店铺信息。
WordPress
安装前的准备工作
在开始之前，请确保：
您已开通并登录 WordPress 的商务版 / 通过服务器构建了镜像 WordPress
确保一个 WordPress 只连接一个 3Chat 空间
操作步骤
- 获取 3Chat 安装代码
- 登录 3Chat 后台，在左侧导航栏依次点击【渠道】→ 【即时聊天】→ 【自定义官网安装】
- 点击复制代码片段
- 进入 WordPress 代码编辑器并将 3Chat 代码导入
- 登录您的云服务器仪表盘，访问 WordPress 镜像网站（若您直接使用 WordPress 商务版可忽略此步）
- 进入 WordPress 仪表盘，在左侧菜单栏，选择【插件】
- 在【插件】页面搜索 “wpcode”，找到 WPCode 插件，并点击安装
- 启用 WPCode 插件后，在【已安装插件】列表找到 WPCode，点击【Code Snippets】进入配置界面
- 点击【Add New】按钮 → 【+Add Custom Snippet】
- 将复制的 3Chat 安装代码粘贴到代码配置页面，类型默认选择 HTML Snippet
- 编辑代码名称，方便在配置界面查看
- 其他配置选项保持默认即可运行
- 保存并启用代码
- 点击右上角【Update】按钮，保存自定义配置
- 开启【Active】按钮，保证插件代码处于启用状态
- 返回代码列表，可查看是否启用成功
- 验证聊天插件生效
- 网站右下角将会出现 3Chat 聊天图标
- 点击图标，测试交互是否成功
常见问题
WPCode 插件保存后未生效？
→ 强制刷新：Ctrl+Shift+R（Windows）或 Cmd+Shift+R（Mac）
→ 冲突检测：
- 停用其他代码注入插件（如 Header Footer Code Manager）
- 切换至默认主题（Twenty 系列）测试
多语言网站仅部分语种生效？
→ 开启 WPCode 的「Run everywhere」选项
→ 为不同语言创建独立代码片段
进一步支持
如需帮助，可联系：
3Chat 客服支持：3Chat@xinheyun.com
最后
恭喜！您已成功将 3Chat 智能客服接入 WordPress！
现在，您的客户可以通过 WordPress 网站直接与 3Chat 交互，提升客服效率！
Framer
安装前的准备工作
在开始之前，请确保：
您已开通并登录 Framer
确保一个 Framer 只连接一个 3Chat 空间
操作步骤
- 获取 3Chat 安装代码
- 登录 3Chat 后台，在左侧导航栏依次点击【渠道】→ 【即时聊天】→ 【自定义官网安装】
- 点击复制代码片段
- 进入 Framer 代码编辑器并将 3Chat 代码导入
- 打开 Framer 编辑页面
- 点击 Home 的编辑图标 → 【设置（Settings）】
- 在设置界面点击左侧【通用设置（General）】
- 在页面底部找到【定制代码（Custom Code）】部分
- 将代码粘贴至 End of
<body>tag 部分
- 点击【保存（Save）】
- 验证聊天插件生效
- 网站右下角将会出现 3Chat 聊天图标
- 点击图标，测试交互是否成功
常见问题
嵌入代码后页面样式错乱？
→ 原因：CSS 选择器冲突
→ 解决方案：
- 在 3Chat 代码外添加容器
<div id="3chat-container">...</div> - 使用 CSS 隔离样式
移动端按钮点击无响应？
→ 关闭 Framer 的「交互预览」模式（发布正式版测试）
→ 检查是否存在「手势冲突」类动画组件
进一步支持
如需帮助，可联系：
3Chat 客服支持：3Chat@xinheyun.com
Framer 技术支持：在 Framer 内进入 Help Center，可联系 Framer 客服
最后
恭喜！您已成功将 3Chat 智能客服接入 Framer！
现在，您的客户可以通过 Framer 网站直接与 3Chat 交互，提升客服效率！