Ajouter le chat en ligne à votre application mobile

Remarque : le contenu de cette section s'applique à l'assistant IA.

Si vous avez une application mobile construite sur un framework mobile tel que iOS, Android ou React Native, vous pouvez utiliser une WebView avec un pont JavaScript pour communiquer entre votre application et l'assistant AI builder web chat.

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

Inclure le chat en ligne dans une WebView

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

Dans le script d'intégration, utilisez l'option " showLauncher pour masquer l'icône de lancement du chat en ligne et l'option " openChatByDefault pour ouvrir automatiquement le chat en ligne au chargement de la page. Dans la plupart des cas, vous voudrez également utiliser l'option " hideCloseButton et utiliser les contrôles natifs de votre application pour contrôler la fermeture de la page ou du panneau de chat en ligne. Pour plus d'informations sur les options de configuration que vous pouvez spécifier dans le script d'intégration, consultez la référence de l'API de chat Web.

L'exemple suivant montre un script intégré 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 assistants region e.g. 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', etc.
        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 permettant de masquer le mécanisme de lancement de la discussion en ligne lorsque l'appareil est hors ligne. Si l'appareil se déconnecte au milieu d'une conversation, des messages d'erreur et des tentatives sont envoyés.

Utilisation d'un pont JavaScript

Dans certaines situations, votre application mobile peut avoir besoin de communiquer avec l'assistant d'IA par le biais d'un chat web. Par exemple, vous pouvez avoir besoin de définir des données contextuelles initiales (telles qu'un identifiant d'utilisateur ou des informations sur le compte) ou d'utiliser la fonction de sécurité du chat en ligne. 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 de mise en œuvre diffèrent d'un cadre d'application mobile à l'autre ; vous pouvez trouver des exemples spécifiques sur la façon de mettre en œuvre un pont JavaScript pour le cadre que vous utilisez. Cependant, le concept de base de l'envoi d'événements entre l'application mobile et le chat web s'applique à tous les frameworks.

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 un message ; comme ce message est uniquement textuel, vous devez analyser des objets JSON pour transmettre les données dans un sens ou dans l'autre.

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

Vous pouvez utiliser le type de réponse " user_defined et l'événement " customResponse pour modifier le comportement de votre application mobile. Cependant, vous devez supprimer la propriété " event.data.element de l'événement avant de le faire passer par le pont JavaScript. La suppression de cette propriété est nécessaire parce qu'elle contient un élément HTML, qui ne peut pas être vérifié par des chaînes de caractères. Toute utilisation du type de réponse " user_defined pour écrire de nouvelles vues dans le chat web doit être écrite en HTML et JavaScript et gérée à l'intérieur de la WebView. (Pour plus d'informations sur l'événement " customResponse, voir la référence de l'API de chat Web)