Añadir el chat web a tu aplicación móvil

Si tienes una aplicación móvil creada en un framework móvil como iOS, Android o React Native, puedes utilizar una WebView con un puente JavaScript para comunicarte entre tu aplicación y el chat web watsonx Assistant.

El uso de WebViews con un puente JavaScript es un patrón común con una implementación similar para todas las infraestructuras móviles.

Inclusión de la conversación web como WebView

Puede incluir la interfaz de conversación web como parte de una página de la aplicación móvil, o como un panel independiente que abre la aplicación. En cualquier caso, debe alojar una página HTML que incluya el script de inclusión de conversación web y, a continuación, incluir dicha página como WebView en la aplicación.

En el script de inclusión, utilice la opción showLauncher para ocultar el icono de iniciador de conversación web y la opción openChatByDefault para abrir la conversación web automáticamente cuando se carga la página. En la mayoría de los casos, también deseará utilizar la opción hideCloseButton y utilizar los controles nativos de la aplicación para controlar cómo se cierra la página de conversación web o el panel. Para obtener más información sobre las opciones de configuración que puede especificar en el script de inclusión, consulte la Referencia de API de conversación web.

El ejemplo siguiente muestra un script de inclusión que incluye estas opciones de configuración:

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

En la aplicación, asegúrese de incluir lógica para ocultar el mecanismo de inicio de conversación web cuando el dispositivo esté fuera de línea. Si el dispositivo pasa a estar fuera de línea en medio de una conversación, se producen los mensajes de error y reintentos adecuados.

Utilización de un puente JavaScript

En algunas situaciones, es posible que la aplicación móvil tenga que comunicarse con la conversación web watsonx Assistant. Por ejemplo, es posible que tenga que establecer datos de contexto iniciales (como un ID de usuario o información de cuenta) o utilizar la característica de seguridad de conversación web. Para ello, puede utilizar un puente JavaScript.

Un puente JavaScript es un patrón común que se puede utilizar en todas las plataformas móviles. Los detalles de implementación difieren de una infraestructura de aplicación móvil a otra; puede encontrar ejemplos específicos sobre cómo implementar un puente JavaScript para la infraestructura que está utilizando. Sin embargo, el concepto básico de enviar eventos de ida y vuelta entre la aplicación móvil y el chat web se aplica a todas las infraestructuras.

Con un puente JavaScript, los eventos se envían entre la aplicación móvil y la WebView, y existen escuchadores de eventos a ambos lados del puente para manejar esos eventos. Cada suceso transporta una carga útil de mensaje; puesto que esta carga útil es sólo de texto, debe especificar y analizar objetos JSON para pasar datos de un lado a otro.

Si la aplicación móvil necesita llamar a un método de instancia de conversación web, debe llamar al método enviando un suceso desde la aplicación a WebView utilizando el puente JavaScript. De forma similar, si necesita ejecutar código en la aplicación móvil en respuesta al comportamiento en la conversación web, puede enviar un evento a través del puente JavaScript desde la conversación web a la aplicación móvil.

Puede utilizar el tipo de respuesta user_defined y el evento customResponse para impulsar el comportamiento en la aplicación móvil. Sin embargo, debe eliminar la propiedad event.data.element del suceso antes de pasarla a través del puente JavaScript. La eliminación de esta propiedad es necesaria porque contiene un elemento HTML, que no se puede encadena. Cualquier uso del tipo de respuesta user_defined para escribir nuevas vistas en la conversación web debe escribirse en HTML y JavaScript y manejarse dentro de WebView. (Para obtener más información sobre el suceso customResponse, consulte la Referencia de API de conversación web.)