目录大纲
- 美洽接入网站前需要准备什么
- 如何获取美洽网站接入代码
- 步骤一：登录美洽后台
- 步骤二：进入渠道或网站设置
- 步骤三：复制 JavaScript 接入代码
- HTML 网站接入美洽的方法
- 示例放置位置
- 接入时需要注意
- WordPress、Shopify 等平台怎么接入
- WordPress 接入步骤
- Shopify 接入步骤
- 移动端 APP 如何接入美洽
- APP 接入基本流程
- 适合接入 APP 的场景
- 接入后如何验证是否成功
- 方法一：直接打开网页测试
- 方法二：使用浏览器开发者工具
- 方法三：后台查看访客
- 美洽接入后建议做的优化
- 设置自动欢迎语
- 配置工作时间
- 绑定客服分组
- 开启移动通知
- FAQ 常见问题
- 美洽代码应该粘贴到哪里？
- 接入后网站不显示客服按钮怎么办？
- WordPress 不会改代码能接入吗？
- 美洽接入会影响网站速度吗？
- 一个美洽账号能接多个网站吗？
美洽客服接入网站通常只需要 3 步：注册账号、获取接入代码、把代码放到网站中。大部分情况下不需要专业开发背景，像 WordPress、Shopify 这类建站平台甚至可以直接复制粘贴完成配置。如果是原生 HTML 网站，通常也只需要修改一个页面模板即可。
很多企业会通过 美洽客服 来实现网站在线咨询、访客管理和自动回复。下面会按实际操作流程，详细说明不同网站和移动端的接入方式。
美洽接入网站前需要准备什么
正式开始前，建议先准备以下内容：
- 已注册的美洽账号
- 网站后台或服务器管理权限
- 可编辑网页代码或安装插件的权限
- 如果是 APP，需要开发人员协助 SDK 接入
如果还没有账号，可以先到 美洽客服官网下载 客户端并完成注册。
如何获取美洽网站接入代码
步骤一：登录美洽后台
进入美洽官网后台后，使用管理员账号登录。
步骤二：进入渠道或网站设置
通常在「设置」-「渠道接入」-「网站插件」中可以找到网站接入入口。
步骤三：复制 JavaScript 接入代码
系统会自动生成一段 JS 代码，格式通常类似：
<script type="text/javascript">...</script>
这段代码就是后面需要放入网站中的在线客服代码。
HTML 网站接入美洽的方法
如果你的网站是传统 HTML 或自己开发的页面，接入方式最简单。
- 打开网站模板文件
- 找到页面底部的 </body> 标签
- 把美洽代码粘贴到 </body> 前面
- 保存并上传文件
- 刷新网页测试
推荐把代码放到全站公共模板中，这样所有页面都会显示客服入口。
示例放置位置
<!-- 美洽客服代码 -->
<script>...</script>
</body>
接入时需要注意
- 不要重复插入多次代码
- 代码必须完整复制
- 网站如果开启缓存，修改后要清理缓存
- 部分 CDN 会延迟更新，需要等待几分钟
WordPress、Shopify 等平台怎么接入
现在大多数网站使用建站平台，配置方式和传统 HTML 有一点区别。下面整理了常见平台的接入方法。
| 平台 | 接入方式 | 是否需要代码 | 难度 |
|---|---|---|---|
| WordPress | 安装 Header/Footer 插件后粘贴代码 | 少量 | 低 |
| Shopify | 在线商店主题中编辑 theme.liquid | 少量 | 低 |
| Wix | 自定义代码功能添加 JS | 少量 | 低 |
| Webflow | Project Settings 中添加 Footer Code | 少量 | 低 |
| 企业官网系统 | 后台第三方代码区域添加 | 通常不需要 | 低 |
WordPress 接入步骤
- 安装 Insert Headers and Footers 类插件
- 进入插件设置页面
- 把美洽代码粘贴到 Footer 区域
- 保存后刷新网站
Shopify 接入步骤
- 进入 Online Store
- 打开 Themes
- 点击 Edit Code
- 找到 theme.liquid 文件
- 在 </body> 前插入美洽代码
移动端 APP 如何接入美洽
如果除了网站，还希望在 iOS 或 Android APP 中使用在线客服，可以通过 SDK 接入。
美洽官网 提供了 Android、iOS 等移动端 SDK，开发人员按照官方文档集成即可。
APP 接入基本流程
- 下载对应平台 SDK
- 导入项目依赖
- 初始化 AppKey
- 配置访客信息
- 打开客服会话界面
适合接入 APP 的场景
- 电商订单咨询
- 教育课程咨询
- SaaS 产品支持
- 会员售后服务
接入后如何验证是否成功
很多用户代码已经放好了，但不确定有没有生效。可以按下面方法检查。
方法一：直接打开网页测试
刷新网站后，页面右下角如果出现客服悬浮按钮，说明已经成功加载。
方法二：使用浏览器开发者工具
按 F12 查看 Console 是否有报错。
- 如果 JS 正常加载，通常不会报错
- 如果提示 script blocked，可能是安全策略限制
- 如果提示 404，说明代码不完整
方法三：后台查看访客
进入美洽后台，如果能看到在线访客进入，说明接入成功。
美洽接入后建议做的优化
设置自动欢迎语
用户进入页面后，可以自动弹出欢迎消息，提高咨询率。
配置工作时间
避免夜间无人值守时用户长时间等待。
绑定客服分组
不同业务分配不同客服，减少转接。
开启移动通知
客服离开电脑时，也能及时收到消息提醒。
FAQ 常见问题
美洽代码应该粘贴到哪里？
推荐放到网站公共模板的 </body> 标签前，这样所有页面都会加载客服组件。
接入后网站不显示客服按钮怎么办？
先检查代码是否完整，其次清理网站缓存和 CDN 缓存，再确认浏览器没有拦截 JS 脚本。
WordPress 不会改代码能接入吗？
可以。使用 Header/Footer 类插件即可，不需要直接修改主题文件。
美洽接入会影响网站速度吗？
正常情况下影响很小，因为客服脚本通常采用异步加载，不会明显拖慢页面。
一个美洽账号能接多个网站吗？
可以，但建议在后台区分不同渠道，方便统计来源和客服管理。
