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