Aggiunta della chat web alla tua applicazione mobile

Se si dispone di un'applicazione mobile costruita su un framework mobile come iOS, Android o React Native, è possibile utilizzare una WebView con un bridge JavaScript per comunicare tra l'applicazione e la chat web watsonx Assistant.

L'uso di WebViews con un bridge JavaScript è un pattern comune con un'implementazione simile per tutti i framework mobili.

Inclusione della chat web come WebView

Puoi includere l'interfaccia web chat come parte di una pagina della tua app mobile o come pannello separato che la tua app apre. In entrambi i casi, devi ospitare una pagina HTML che include lo script di integrazione della chat web e quindi includere tale pagina come WebView nella tua app.

Nello script embed utilizzare l'opzione showLauncher per nascondere l'icona del launcher di web chat e l'opzione openChatByDefault per aprire automaticamente la chat web quando la pagina carica. Nella maggior parte dei casi, inoltre, si vorrà utilizzare l'opzione hideCloseButton e utilizzare i controlli nativi della propria app per controllare come si chiude la pagina web della chat o del pannello. Per ulteriori informazioni sulle opzioni di configurazione è possibile specificare nello script embed, consultare il riferimento API di Web chat.

Il seguente esempio mostra uno script embed che include queste opzioni di configurazione:

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

Nella tua app, assicurati di includere la logica per nascondere il meccanismo di avvio della chat web quando il dispositivo è offline. Se il dispositivo va offline nel mezzo di una conversazione, si verificano messaggi di errore e tentativi appropriati.

Utilizzo di un bridge JavaScript

In alcune situazioni, la tua applicazione mobile potrebbe dover comunicare con la chat web watsonx Assistant. Ad esempio, potrebbe essere necessario impostare i dati di contesto iniziali (come ad esempio un ID utente o informazioni di account) oppure utilizzare la funzione di sicurezza della chat web. A tale scopo, è possibile utilizzare un bridge JavaScript.

Un bridge JavaScript è un modello comune che può essere utilizzato su tutte le piattaforme mobili. I dettagli di implementazione differiscono da un framework di applicazione mobile ad un altro; è possibile trovare esempi specifici su come implementare un bridge JavaScript per il framework che si utilizza. Tuttavia, il concetto core di invio di eventi avanti e indietro tra l'app mobile e la chat web si applicano a tutti i quadri.

Con un bridge JavaScript, gli eventi vengono inviati tra l'applicazione mobile e la WebView, e gli ascoltatori di eventi esistono su entrambi i lati del bridge per gestire tali eventi. Ogni evento trasporta un payload di messaggi; poiché questo payload è solo di testo, è necessario stravolgere e analizzare gli oggetti JSON per passare i dati avanti e indietro.

Se la tua applicazione mobile deve richiamare un metodo dell'istanza di chat web, devi richiamare il metodo inviando un evento dall'app a WebView utilizzando il bridge JavaScript. Allo stesso modo, se hai bisogno di eseguire del codice nella tua applicazione mobile in risposta al comportamento nella chat web, puoi inviare un evento tramite il bridge JavaScript dalla chat web alla tua applicazione mobile.

È possibile utilizzare il tipo di risposta user_defined e l'evento customResponse per guidare il comportamento sulla propria applicazione mobile. Tuttavia, è necessario rimuovere la proprietà event.data.element dall'evento prima di passare attraverso il bridge JavaScript. La rimozione di questa proprietà è necessaria perché contiene un elemento HTML, che non può essere stringiato. Qualsiasi utilizzo del tipo di risposta user_defined per scrivere nuove viste nella chat web deve essere scritto in HTML e JavaScript e gestito all'interno di WebView. (Per ulteriori informazioni sull'evento customResponse, consultare il riferimento API di Web chat.)