將 Web 會談新增至行動式應用程式

如果您的行動應用程式是建構在 iOS, Android 或 React Native 等行動框架上，您可以使用 WebView 搭配 JavaScript 橋接，在您的應用程式與 watsonx Assistant 網路聊天之間進行通訊。

搭配使用 WebViews 與 JavaScript 橋接器，是對所有行動式架構具有類似實作的一般型樣。

將 Web 會談併入為 WebView

您可以包括 Web 會談介面作為行動式應用程式頁面的一部分，或作為應用程式開啟的個別畫面。在任一情況下，您都必須管理包含 Web 會談內嵌 Script 的 HTML 頁面，然後在應用程式中包含該頁面作為 WebView。

在內嵌 Script 中，使用 showLauncher 選項隱藏 Web 會談啟動程式圖示，並使用 openChatByDefault 選項在頁面載入時自動開啟 Web 會談。在大部分情況下，您也會想要使用 hideCloseButton 選項，並使用應用程式的原生控制項來控制如何關閉 Web 會談頁面或畫面。如需您可以在內嵌 Script 中指定之配置選項的相關資訊，請參閱 Web 會談 API 參考資料。

下列範例顯示內含這些配置選項的內嵌 Script:

<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 會談進行通訊。例如，您可能需要設定起始環境定義資料 (例如使用者 ID 或帳戶資訊)，或使用 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 參考資料。)