IBM Cloud Docs
在页面上嵌入 Web 聊天

在页面上嵌入 Web 聊天

要将 Web 聊天窗口小部件添加到 Web 站点，需要在 HTML 源中嵌入生成的脚本元素。

对于每个助手，将自动包含 Web 聊天集成，并针对每个环境单独配置 Web 聊天集成。

对于与基于 React 的应用程序的 webchat 集成，请参阅 此处 的替代方法。

要将 Web 聊天添加到 Web 站点，请执行以下操作:

  1. 在 "集成" 图标 集成 页面上，找到 Web 聊天 磁贴，然后单击 打开。 此时将打开“打开 Web 交谈”窗口。

  2. 在 环境 字段中，选择您希望 Web 聊天窗口小部件连接到的环境。 请单击确认。

    这将打开“Web 聊天”页面，其中显示所选环境中的 Web 聊天集成的设置。

    预览窗格显示嵌入 Web 页面时 Web 交谈的外观。 如果看到以 There is an error 开头的消息，那么可能尚未向助手添加任何操作。 添加操作后，可以从预览窗格测试对话。

  3. 单击嵌入选项卡。

    将根据 Web 聊天配置生成代码片段。 您 (或 Web 开发者) 会将此代码片段添加到要在其中显示 Web 交谈的 Web 页面。

    这段代码包含一个HTML script 元素。 该脚本调用 IBM 站点上托管的 JavaScript 代码，并创建与助手进行通信的窗口小部件实例。

  4. 单击 复制图标 复制到剪贴板 图标以将嵌入的脚本复制到剪贴板。

  5. 编辑要在其中显示 Web 聊天窗口小部件的 Web 页面的 HTML 源。 将代码片段粘贴到该页面中。 将代码粘贴到尽可能靠近关闭 </body> 标记的位置，以确保页面呈现速度更快。

    请勿修改生成的嵌入脚本中的 integrationID 或 region 属性值。

    如果您尚未准备好将 Web 聊天添加到实时 Web 站点，那么可以使用本地 HTML 文件对其进行快速测试。 使用此 HTML 代码作为测试页面的源:

    <html>
<head></head>
<body>
    <title>My Test Page</title>
    <p>The body of my page.</p>
    <!-- copied script elements -->
    </body>
</html>

    将此代码复制到具有 .html 扩展名的文件中，并将 script 元素替换为您在上一步中复制的嵌入脚本。

    嵌入脚本 (例如 integrationID serviceInstanceID) 中的标识不会被视为私钥，对于有权访问您的 Web 站点的任何人都可视。 有关更多信息，请参阅 安全性。

  6. 如果托管 Web 站点的系统具有有限的因特网访问权 (例如，如果使用代理或防火墙)，请确保可访问托管 Web 聊天的 URL。 有关更多信息，请参阅 访问 Web 聊天主机。

  7. 在浏览器中打开网页（或本地测试文件）。 您应该看到启动器图标网络聊天启动器图标 显示在页面上：

  8. 点击启动器图标打开聊天窗口。

  9. 将相同的嵌入脚本粘贴到每个网页上，以便您的客户可以使用该助手。

    您可以根据需要将相同 script 标记粘贴到 Web 站点上任意数量的页面中。 请将 script 标记添加到您希望用户能够访问助手以获取帮助的任何位置。 但是，请确保在每个页面上仅添加一次。

现在，您可以像客户一样测试助手并查看其响应。

但是，在使用 Web 聊天进行生产之前，您可能希望根据站点和客户的需求对其进行定制。 有关更多信息，请参阅 Web 聊天开发概述。