Ajouter le chat en ligne à votre application mobile

Si vous avez une application mobile construite sur un cadre mobile tel que iOS, Android ou React Native, vous pouvez utiliser une WebView avec un pont JavaScript pour communiquer entre votre application et le chat web watsonx Assistant

L'utilisation de WebViews avec un pont JavaScript est un modèle commun avec une implémentation similaire pour toutes les infrastructures mobiles.

Inclusion de la discussion Web en tant que WebView

Vous pouvez inclure l'interface de discussion Web dans une page de votre application mobile ou dans un panneau distinct ouvert par votre application. Dans les deux cas, vous devez héberger une page HTML qui inclut le script d'imbrication de discussion Web, puis inclure cette page en tant que WebView dans votre application.

Dans le script d'imbrication, utilisez l'option showLauncher pour masquer l'icône de lancement de discussion Web et l'option openChatByDefault pour ouvrir la discussion Web automatiquement lorsque la page est chargée. Dans la plupart des cas, vous souhaiterez également utiliser l'option hideCloseButton et les contrôles natifs de votre application pour contrôler la fermeture de la page ou du panneau de discussion Web. Pour plus d'informations sur les options de configuration que vous pouvez spécifier dans le script d'imbrication, voir Web chat API reference.

L'exemple suivant illustre un script d'imbrication qui inclut ces options de configuration:

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

Dans votre application, veillez à inclure une logique pour masquer votre mécanisme de lancement de discussion Web lorsque l'appareil est hors ligne. Si l'unité est mise hors ligne au milieu d'une conversation, des messages d'erreur appropriés et des nouvelles tentatives se produisent.

Utilisation d'un pont JavaScript

Dans certaines situations, votre application mobile peut avoir besoin de communiquer avec la discussion Web watsonx Assistant. Par exemple, vous pouvez être amené à définir des données de contexte initiales (telles qu'un ID utilisateur ou des informations de compte) ou à utiliser la fonction de sécurité de la discussion Web. Pour ce faire, vous pouvez utiliser un pont JavaScript.

Un pont JavaScript est un modèle commun qui peut être utilisé sur toutes les plateformes mobiles. Les détails d'implémentation diffèrent d'une infrastructure d'application mobile à une autre ; vous trouverez des exemples spécifiques sur la manière d'implémenter un pont JavaScript pour l'infrastructure que vous utilisez. Toutefois, le concept de base de l'envoi d'événements entre l'application mobile et la discussion Web s'applique à toutes les infrastructures.

Avec un pont JavaScript, les événements sont envoyés entre l'application mobile et la WebView,, et des récepteurs d'événements existent des deux côtés du pont pour gérer ces événements. Chaque événement contient une charge de message. Etant donné que cette charge de travail est de type texte uniquement, vous devez convertir en chaîne et analyser les objets JSON pour transmettre des données d'avant en arrière.

Si votre application mobile doit appeler une méthode d'instance de discussion Web, vous devez appeler la méthode en envoyant un événement de l'application à WebView à l'aide du pont JavaScript. De même, si vous devez exécuter du code dans votre application mobile en réponse au comportement de la discussion Web, vous pouvez envoyer un événement via le pont JavaScript depuis la discussion Web vers votre application mobile.

Vous pouvez utiliser le type de réponse user_defined et l'événement customResponse pour générer un comportement sur votre application mobile. Toutefois, vous devez supprimer la propriété event.data.element de l'événement avant de la transmettre via le pont JavaScript. La suppression de cette propriété est nécessaire car elle contient un élément HTML qui ne peut pas être converti en chaîne. Toute utilisation du type de réponse user_defined pour écrire de nouvelles vues dans la discussion Web doit être écrite en HTML et JavaScript et traitée dans WebView. (Pour plus d'informations sur l'événement customResponse, voir Web chat API reference.)