如何在静态 HTML 网站上安装 Papo 聊天小部件

要在静态 HTML 网站上安装 Papo 聊天小部件（https://papo.global/），请复制面板中生成的代码片段，并将其直接粘贴到源代码中，位于 </body> 标签之前，在所有需要显示客服的页面上。颜色和欢迎消息的自定义完全在面板中完成，无需修改 HTML。

如何在静态 HTML 网站上安装小组件

1. 创建网站类型的收件箱
   在 Papo 面板中，前往 设置 → 收件箱，点击 添加收件箱 并选择 网站。输入名称（例如“网站聊天”）和网站 URL（不影响运行，仅帮助识别渠道）。无需安装任何插件；对于任何提供 HTML 文件的网站，过程都相同。

2. 复制生成的代码片段
   创建收件箱后，面板会显示一个专属的 JavaScript 代码。复制整个 <script>...</script> 块。

3. 将代码片段粘贴到 HTML 中
   打开页面的 HTML 文件（例如 index.html），将代码插入到 </body> 标签之前。在每个想要显示聊天的页面上执行此操作。如果网站使用公共页脚或页眉文件（通过 include 或 PHP），只需将代码片段添加到该单一文件即可在整个网站上激活小组件。

   代码中位置的示例：

   <body>
     <!-- 页面内容 -->
     <script src="https://app.papo.global/..."></script>
   </body>
   

   无需任何后端知识；小组件在访客的浏览器中运行。

4. 将客服人员关联到收件箱
   返回面板，在同一收件箱中，添加至少一名客服人员。如果没有关联的客服人员，收件箱将没有客服，小组件可能不会显示。如果只有一名客服人员，则自动关联；在团队中，选择负责的成员。

自定义颜色和欢迎消息

粘贴代码片段后，您可以在不修改代码的情况下自定义小组件的外观：

• 主色：在面板的收件箱设置中，选择与网站视觉形象匹配的颜色。更改会立即反映。
• 欢迎消息：启用主动问候，并编写几秒后自动显示的文本。有效示例：“你好！我们能帮您什么？”或“需要订单帮助吗？”。

这些选项与创建收件箱的位置相同。任何更改都会应用到小组件，无需复制新的代码片段。

如何测试线索捕获

1. 在匿名窗口中打开网站（以避免缓存），检查屏幕角落是否出现聊天图标。
2. 点击图标并发送测试消息（例如“我想了解更多信息”）。
3. 在 Papo 面板中，访问网站的收件箱，确认对话出现。联系人将自动注册到 CRM，您可以通过面板回复。

如果消息未到达，请检查代码片段是否位于 </body> 之前，收件箱是否激活，以及是否至少关联了一名客服人员。脚本拦截器可能会阻止加载；也请在没有活动扩展的情况下测试。

适用对象

• 静态 HTML 网站，没有 CMS（WordPress、Shopify），需要专业聊天功能。
• 着陆页和作品集，快速联系可提高转化率。
• 开发者，在将小组件集成到更大平台之前进行测试。
• 小型企业，维护简单网站并希望捕获线索而无需安装复杂系统。

常见问题

我需要后端服务器来使用小组件吗？

不需要。小组件基于在浏览器中执行的 JavaScript。只需将代码片段粘贴到 HTML 中，聊天即可工作。

代码片段需要复制到所有页面吗？

是的，在每个需要显示聊天的页面上。如果您的网站使用公共页脚文件，只需在那里放置一次代码片段，即可在整个网站上启用小组件。

安装后我可以自定义颜色吗？

是的，颜色和欢迎消息文本的更改在 Papo 面板中进行，并自动显示在小组件中，无需修改代码。

如果小组件没有出现在网站上怎么办？

检查代码片段是否插入到 </body> 之前，收件箱是否激活并关联了客服人员，以及浏览器中是否有脚本拦截器。清除网站缓存也有帮助。

我需要为每个不同的网站重新创建代码片段吗？

是的。每个收件箱生成一个专属脚本。如果您有多个域名（例如机构网站和单独的着陆页），请为每个域名创建一个收件箱并使用相应的代码片段。

小组件会影响网站性能吗？

加载是异步的，不会阻止页面渲染。小组件文件轻量，仅在需要时加载。

延伸阅读

• 如何自定义聊天小组件的外观（颜色、徽标和消息）

免费开始 →

第一个用户永久免费——您可以在几分钟内在静态网站上安装 Papo 小组件，无需信用卡，并立即开始捕获线索。