**要将 Papo 网站聊天嵌入 WordPress，请在 Papo 平台（https://papo.global/）创建一个“网站”类型的收件箱，复制生成的脚本并粘贴到 WordPress 中——可直接粘贴到主题代码、使用脚本插入插件，或通过页眉/页脚区域插入。然后，直接在 Papo 面板中调整颜色和欢迎消息，使小组件与您的品牌视觉形象保持一致。**

| 步骤 | 操作 | 详情 |
|---|---|---|
| 1. 创建收件箱 | 在 Papo 面板中，前往 **设置 → 收件箱 → 添加收件箱**，然后选择 **网站** | 输入 WordPress 的 URL 和收件箱名称（例如：“销售网站聊天”） |
| 2. 复制脚本 | 创建收件箱后，平台会显示一段代码 | 保存代码以便粘贴到 WordPress |
| 3. 粘贴到 WordPress | 将脚本插入网站的 `</body>` 标签之前 | 使用脚本插入插件、主题的 `footer.php` 文件，或自定义器的页眉/页脚区域 |
| 4. 自定义外观 | 在收件箱设置中（仍在 Papo 面板），调整颜色和欢迎消息 | 小组件将继承所设置的颜色和问候语，保持与品牌一致 |

## 如何详细安装小组件

1. **创建网站收件箱：** 在 **设置 → 收件箱** 菜单中，点击 **添加收件箱**。在渠道列表中选择 **网站**。为其取一个能说明用途的名称（例如：“在线客服”），并输入聊天将显示的 WordPress URL。
2. **复制小组件脚本：** 收件箱创建后，Papo 会自动生成一小段代码（JavaScript）。复制该脚本。
3. **将代码粘贴到 WordPress：** 最常见的方法是使用专门的脚本插件（如 “Insert Headers and Footers”），它允许将代码粘贴到页脚区域，而无需修改主题文件。如果您更愿意直接编辑主题，请打开 `footer.php` 文件，并将脚本粘贴到 `</body>` 标签之前。保存更改。
4. **将坐席关联到收件箱：** 仍在 Papo 面板中，添加将处理小组件中发起的对话的团队成员。如果没有关联坐席，消息将无法分配。

## 自定义颜色和欢迎消息

小组件安装后，您无需改动代码即可调整其外观和行为：

- **颜色：** 设置按钮和标题的主色与强调色。所选颜色将自动应用到聊天中，体现您网站的配色方案。
- **欢迎消息：** 配置一条主动问候语，在几秒后向访客显示。可使用“您好！需要我帮您找点什么吗？”或“对我们的服务有疑问吗？”等语句。
- **小组件图标：** 将默认图标替换为更能代表您的品牌或聊天操作的图片。
- **智能行为：** 您可以将小组件连接到 AI 助手（Capitão），以自动回复、筛选潜在客户并安排会议，还可以设置服务时间，并配置非工作时间的自动回复。

所有这些选项都可以在“网站”类型收件箱的配置页面中找到，无需再次访问 WordPress 代码。

## 此集成适用于谁

- **WooCommerce 在线商店**，希望实时服务客户并收集产品相关问题。
- **博客和企业网站**，希望通过对话将读者转化为潜在客户。
- **代理机构和自由职业者**，使用 WordPress 并需要一个专业的联系渠道，并与 CRM 和 WhatsApp 集成。
- **任何 B2B 或 B2C 业务**，如果已经在使用 Papo 作为客服平台，并希望在不迁移工具的情况下将聊天带到网站。

## 常见问题

### 安装小组件需要会编程吗？
不需要。整个过程只需复制一段代码并粘贴到 WordPress。脚本插入插件会让这项任务更简单，无需技术知识。

### 我可以在正式上线前测试小组件吗？
可以。您可以将脚本安装到测试环境或 WordPress 的非公开页面中，在发布到主站之前验证颜色、消息和运行情况。

### 聊天在移动设备上能用吗？
可以，Papo 小组件是响应式的，会自动适配智能手机和平板电脑，无需额外配置。

### 安装后可以更改聊天图标吗？
可以，您可以随时在收件箱设置中更改图标，无需改动 WordPress 代码。

### 聊天如何与 WhatsApp 和 CRM 连接？
同一个网站收件箱可与 WhatsApp、Instagram 等渠道并行使用。所有对话都会记录在联系人资料中，如果访客更愿意，您也可以在 WhatsApp 上继续服务。此外，还可以直接从聊天在 Kanban 漏斗中创建商机。

### 粘贴脚本后小组件没有出现怎么办？
检查代码是否插入到 `</body>` 标签之前，以及是否与缓存插件存在冲突。清除网站和浏览器缓存。如果问题仍然存在，请确认收件箱是否处于启用状态并已关联坐席。

## 另请阅读

- [如何为 WhatsApp 新联系人创建自动欢迎流程](/hc/papo/articles/how-to-create-automated-welcome-flow-for-new-whatsapp-contacts)
- [如何使用联系人姓名和数据自定义自动消息](/hc/papo/articles/personalize-automatic-messages-contact-data)

---

**[免费开始 →](https://papo.global/?utm_source=helpcenter&utm_medium=article&utm_campaign=how-to-embed-papo-website-chat-in-wordpress&utm_content=zh_CN)**

首位用户永久免费，无需信用卡。