Hinzufügen des Web-Chats zu Ihrer mobilen Anwendung

Wenn Sie eine mobile Anwendung haben, die auf einem mobilen Framework wie iOS,, Android oder React Native basiert, können Sie WebView mit JavaScript verwenden, um zwischen Ihrer App und watsonx Assistant zu kommunizieren.

Die Verwendung von WebViews mit einer JavaScript-Bridge ist ein allgemeines Muster mit einer ähnlichen Implementierung für alle mobilen Frameworks.

Web-Chat als WebView einschließen

Sie können die Web-Chat-Schnittstelle als Teil einer Seite Ihrer mobilen App oder als separates Fenster, das Ihre App öffnet, einschließen. In beiden Fällen müssen Sie eine HTML-Seite hosten, die das Web-Chat-Einbettungsscript enthält, und diese Seite dann als WebView in Ihre App einschließen.

Verwenden Sie im Einbettungsscript die Option showLauncher, um das Startstartsymbol des Web-Chats auszublenden, und die Option openChatByDefault, um den Web-Chat beim Laden der Seite automatisch zu öffnen. In den meisten Fällen möchten Sie auch die Option hideCloseButton verwenden und mit den nativen Steuerelementen Ihrer App steuern, wie die Web-Chat-Seite oder -Anzeige geschlossen wird. Weitere Informationen zu den Konfigurationsoptionen, die Sie im Einbettungsscript angeben können, finden Sie unter Web-Chat-API-Referenz.

Das folgende Beispiel zeigt ein Einbettungsscript, das diese Konfigurationsoptionen enthält:

<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>

Stellen Sie in Ihrer App sicher, dass Sie Logik zum Ausblenden Ihres Web-Chat-Startmechanismus einschließen, wenn das Gerät offline ist. Wenn das Gerät während eines Dialogs offline geht, treten entsprechende Fehlernachrichten und Wiederholungen auf.

JavaScript-Bridge verwenden

In einigen Situationen kann es vorkommen, dass Ihre mobile Anwendung mit dem watsonx Assistant-Web-Chat kommunizieren muss. Möglicherweise müssen Sie beispielsweise Ausgangskontextdaten (z. B. eine Benutzer-ID oder Kontoinformationen) festlegen oder die Web-Chat-Sicherheitsfunktion verwenden. Hierfür können Sie eine JavaScript-Bridge verwenden.

Eine JavaScript-Bridge ist ein gängiges Muster, das auf allen mobilen Plattformen verwendet werden kann. Die Implementierungsdetails unterscheiden sich von einem Framework für mobile Anwendungen zu einem anderen. Sie finden spezifische Beispiele zur Implementierung einer JavaScript-Bridge für das von Ihnen verwendete Framework. Das Kernkonzept des Versendens von Ereignissen zwischen der mobilen App und dem Web-Chat gilt jedoch für alle Frameworks.

Mit JavaScript werden Ereignisse zwischen der mobilen App und WebView, gesendet, und auf beiden Seiten der Brücke gibt es Ereignis-Listener, die diese Ereignisse verarbeiten. Jedes Ereignis enthält Nachrichtennutzdaten. Da diese Nutzdaten nur aus Text bestehen, müssen Sie JSON-Objekte stringifizieren und syntaktisch analysieren, um Daten hin und her zu übergeben.

Wenn Ihre mobile Anwendung eine Web-Chat-Instanzmethode aufrufen muss, dann müssen Sie die Methode aufrufen, indem Sie über die JavaScript-Bridge ein Ereignis von der App an WebView senden. Wenn Sie Code in Ihrer mobilen Anwendung als Reaktion auf das Verhalten im Web-Chat ausführen müssen, können Sie ein Ereignis über die JavaScript-Bridge vom Web-Chat an Ihre mobile Anwendung senden.

Sie können den Antworttyp user_defined und das Ereignis customResponse verwenden, um das Verhalten Ihrer mobilen Anwendung zu steuern. Sie müssen jedoch die Eigenschaft event.data.element aus dem Ereignis entfernen, bevor Sie sie über die JavaScript-Bridge übergeben. Diese Eigenschaft muss entfernt werden, da sie ein HTML-Element enthält, das nicht in eine Zeichenfolge konvertiert werden kann. Jede Verwendung des Antworttyps user_defined zum Schreiben neuer Ansichten in den Web-Chat muss in HTML und JavaScript geschrieben und in WebViewverarbeitet werden. (Weitere Informationen zum Ereignis customResponse finden Sie unter Web chat API reference.)