将 Web 聊天添加到移动应用程序

如果您有一个基于移动框架（如 iOS, Android或React Native）构建的移动应用程序，则可以使用带有 JavaScript 桥的 WebView 在您的应用程序和 watsonx Assistant 网络聊天之间进行通信。

将 WebViews 与 JavaScript 网桥配合使用是具有所有移动框架的类似实现的公共模式。

将 Web 聊天包含为 WebView

您可以将 Web 聊天界面包含为移动应用程序页面的一部分，也可以将其包含为应用程序打开的单独面板。在任一情况下，您都必须托管包含 Web 聊天嵌入脚本的 HTML 页面，然后将该页面作为 WebView 包含在应用程序中。

在嵌入脚本中，使用 showLauncher 选项隐藏 Web 聊天启动程序图标，使用 openChatByDefault 选项在页面装入时自动打开 Web 聊天。在大多数情况下，您还需要使用 hideCloseButton 选项，并使用应用程序的本机控件来控制 Web 聊天页面或面板的关闭方式。有关可以在嵌入脚本中指定的配置选项的更多信息，请参阅 Web 聊天 API 参考。

以下示例显示了包含这些配置选项的嵌入脚本:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script>
      window.watsonAssistantChatOptions = {
        // A UUID like '1d7e34d5-3952-4b86-90eb-7c7232b9b540' included in the embed code.
        integrationID: "YOUR_INTEGRATION_ID",
        // Your assistant's region, for example, 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', and so on.
        region: "YOUR_REGION",
        // A UUID like '6435434b-b3e1-4f70-8eff-7149d43d938b' included in the embed code.
        serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
        // The callback function that is called after the widget instance has been created.
        onLoad: function(instance) {
          instance.render();
        },
        showLauncher: false, // Hide the web chat launcher, you will open the WebView from your mobile application
        openChatByDefault: true, // When the web chat WebView is opened, the web chat will already be open and ready to go.
        hideCloseButton: true // And the web chat will not show a close button, instead relying on the controls to close the WebView
      };
      setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
    </script>
  </body>
</html>

在应用程序中，确保包含逻辑以在设备脱机时隐藏 Web 聊天启动机制。如果设备在对话中脱机，那么将发生相应的错误消息和重试。

使用 JavaScript 网桥

在某些情况下，您的移动应用程序可能需要与 watsonx Assistant Web 聊天进行通信。例如，您可能需要设置初始上下文数据 (例如用户标识或帐户信息) 或使用 Web 聊天安全功能。为此，您可以使用 JavaScript 网桥。

JavaScript 网桥是可在所有移动平台上使用的公共模式。实现详细信息因一个移动应用程序框架而异; 您可以找到有关如何为您正在使用的框架实现 JavaScript 网桥的特定示例。但是，在移动应用程序和 Web 聊天之间来回发送事件的核心概念适用于所有框架。

通过 JavaScript，事件在移动应用程序和 WebView, 之间发送，事件侦听器存在于桥的两端，以处理这些事件。每个事件都包含一个消息有效内容; 由于此有效内容是纯文本的，因此您必须对 JSON 对象进行字符串化和解析以来回传递数据。

如果移动应用程序需要调用 Web 聊天实例方法，那么必须通过使用 JavaScript 网桥将事件从应用程序发送到 WebView 来调用该方法。同样，如果需要在移动应用程序中运行代码以响应 Web 聊天中的行为，那么可以通过 JavaScript 网桥将事件从 Web 聊天发送到移动应用程序。

您可以使用 user_defined 响应类型和 customResponse 事件来驱动移动应用程序上的行为。但是，必须先从事件中删除 event.data.element 属性，然后才能通过 JavaScript 网桥传递该属性。需要除去此属性，因为它包含无法字符串化的 HTML 元素。任何使用 user_defined 响应类型将新视图写入 Web 聊天的操作都必须以 HTML 和 JavaScript 编写，并在 WebView中进行处理。 (有关 customResponse 事件的更多信息，请参阅 Web 聊天 API 参考。)