**要在静态 HTML 网站上安装 Papo 聊天小部件（https://papo.global/），请复制面板中生成的代码片段，并将其直接粘贴到源代码中，位于 `` 标签之前，在所有需要显示客服的页面上。颜色和欢迎消息的自定义完全在面板中完成，无需修改 HTML。** | 步骤 | 操作 | 详情 | | :--- | :--- | :--- | | **1. 创建收件箱** | 前往 **设置 → 收件箱 → 添加收件箱 → 网站**。 | 为其命名并输入网站 URL（仅用于识别）。 | | **2. 复制代码片段** | 面板会生成一个专属的 `` 块。 3. **将代码片段粘贴到 HTML 中** 打开页面的 HTML 文件（例如 `index.html`），将代码插入到 `` 标签之前。在每个想要显示聊天的页面上执行此操作。如果网站使用公共页脚或页眉文件（通过 `include` 或 PHP），只需将代码片段添加到该单一文件即可在整个网站上激活小组件。代码中位置的示例： ```html ``` 无需任何后端知识；小组件在访客的浏览器中运行。 4. **将客服人员关联到收件箱** 返回面板，在同一收件箱中，添加至少一名客服人员。如果没有关联的客服人员，收件箱将没有客服，小组件可能不会显示。如果只有一名客服人员，则自动关联；在团队中，选择负责的成员。 ## 自定义颜色和欢迎消息粘贴代码片段后，您可以在不修改代码的情况下自定义小组件的外观： - **主色**：在面板的收件箱设置中，选择与网站视觉形象匹配的颜色。更改会立即反映。 - **欢迎消息**：启用主动问候，并编写几秒后自动显示的文本。有效示例：“你好！我们能帮您什么？”或“需要订单帮助吗？”。这些选项与创建收件箱的位置相同。任何更改都会应用到小组件，无需复制新的代码片段。 ## 如何测试线索捕获 1. 在匿名窗口中打开网站（以避免缓存），检查屏幕角落是否出现聊天图标。 2. 点击图标并发送测试消息（例如“我想了解更多信息”）。 3. 在 Papo 面板中，访问网站的收件箱，确认对话出现。联系人将自动注册到 CRM，您可以通过面板回复。如果消息未到达，请检查代码片段是否位于 `` 之前，收件箱是否激活，以及是否至少关联了一名客服人员。脚本拦截器可能会阻止加载；也请在没有活动扩展的情况下测试。 ## 适用对象 - **静态 HTML 网站**，没有 CMS（WordPress、Shopify），需要专业聊天功能。 - **着陆页**和**作品集**，快速联系可提高转化率。 - **开发者**，在将小组件集成到更大平台之前进行测试。 - **小型企业**，维护简单网站并希望捕获线索而无需安装复杂系统。 ## 常见问题 ### 我需要后端服务器来使用小组件吗？不需要。小组件基于在浏览器中执行的 JavaScript。只需将代码片段粘贴到 HTML 中，聊天即可工作。 ### 代码片段需要复制到所有页面吗？是的，在每个需要显示聊天的页面上。如果您的网站使用公共页脚文件，只需在那里放置一次代码片段，即可在整个网站上启用小组件。 ### 安装后我可以自定义颜色吗？是的，颜色和欢迎消息文本的更改在 Papo 面板中进行，并自动显示在小组件中，无需修改代码。 ### 如果小组件没有出现在网站上怎么办？检查代码片段是否插入到 `` 之前，收件箱是否激活并关联了客服人员，以及浏览器中是否有脚本拦截器。清除网站缓存也有帮助。 ### 我需要为每个不同的网站重新创建代码片段吗？是的。每个收件箱生成一个专属脚本。如果您有多个域名（例如机构网站和单独的着陆页），请为每个域名创建一个收件箱并使用相应的代码片段。 ### 小组件会影响网站性能吗？加载是异步的，不会阻止页面渲染。小组件文件轻量，仅在需要时加载。 ## 延伸阅读 - [如何自定义聊天小组件的外观（颜色、徽标和消息）](/hc/papo/articles/how-to-customize-chat-widget-appearance-colors-logo-message) --- **[免费开始 →](https://papo.global/?utm_source=helpcenter&utm_medium=article&utm_campaign=install-papo-chat-widget-static-html-site-zh&utm_content=zh_CN)** 第一个用户永久免费——您可以在几分钟内在静态网站上安装 Papo 小组件，无需信用卡，并立即开始捕获线索。