Añadir el chat web a tu aplicación móvil
Si tienes una aplicación móvil construida sobre un framework móvil como iOS, Android o React Native, puedes usar una WebView con un puente JavaScript para comunicarte entre tu app y el chat web del AI assistant builder.
El uso de WebViews con un puente JavaScript es un patrón común con una implementación similar para todos los frameworks móviles.
Incluir el chat web como WebView
Puedes incluir la interfaz de chat web como parte de una página de tu aplicación móvil, o como un panel independiente que abre tu aplicación. En cualquier caso, debe alojar una página HTML que incluya el script de incrustación del chat web y, a continuación, incluir esa página como una WebView en su aplicación.
En el script de incrustación, utiliza la opción " showLauncher " para ocultar el icono de inicio del chat web y la opción " openChatByDefault " para abrir el chat web automáticamente al cargar la página. En la mayoría de los casos, también querrás utilizar la opción ' hideCloseButton y utilizar los controles nativos de tu aplicación para controlar cómo se cierra la página o el panel del chat web. Para obtener más información sobre las opciones de configuración que puede especificar en el script de incrustación, consulte la referencia de la API de chat en la Web.
El siguiente ejemplo muestra un script de incrustació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 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>
En tu aplicación, asegúrate de incluir la lógica para ocultar el mecanismo de inicio del chat web cuando el dispositivo esté desconectado. Si el dispositivo se desconecta en medio de una conversación, se producen los mensajes de error y los reintentos correspondientes.
Utilizar un puente JavaScript
En algunas situaciones, es posible que su aplicación móvil necesite comunicarse con el chat web del asistente de IA. Por ejemplo, puede que necesites establecer los datos de contexto iniciales (como un ID de usuario o la información de una cuenta) o utilizar la función de seguridad del chat web. Para ello, puede utilizar un puente JavaScript.
Un puente JavaScript es un patrón común que puede utilizarse en todas las plataformas móviles. Los detalles de implementación difieren de un framework de aplicaciones móviles a otro; puedes encontrar ejemplos específicos sobre cómo implementar un puente JavaScript para el framework que estés utilizando. Sin embargo, el concepto central de enviar eventos de ida y vuelta entre la aplicación móvil y el chat web se aplica a todos los frameworks.
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 evento lleva una carga útil de mensaje; como esta carga útil es sólo texto, debes encadenar y analizar objetos JSON para pasar datos de un lado a otro.
Si su aplicación móvil necesita llamar a un método de instancia de chat web, debe llamar al método enviando un evento desde la aplicación a la WebView utilizando el puente JavaScript. Del mismo modo, si necesita ejecutar código en su aplicación móvil en respuesta a un comportamiento en el chat web, puede enviar un evento a través del puente JavaScript desde el chat web a su aplicación móvil.
Puede utilizar el tipo de respuesta " user_defined " y el evento " customResponse " para controlar el comportamiento de su aplicación móvil. Sin embargo, debes eliminar la propiedad ' event.data.element ' del evento antes de pasarlo a través del puente JavaScript. La eliminación de esta propiedad es necesaria porque contiene un elemento HTML, que no puede ser encadenado. Cualquier uso del tipo de respuesta ' user_defined ' para escribir nuevas vistas en el chat web debe ser escrito en HTML y JavaScript y manejado dentro de la WebView. (Para obtener más información sobre el evento " customResponse ", consulte la referencia de la API de chat web)