Adição do bate-papo na Web ao seu aplicativo móvel

Se você tiver um aplicativo móvel criado em uma estrutura móvel, como iOS, Android ou React Native, poderá usar um WebView com uma ponte JavaScript para se comunicar entre seu aplicativo e o bate-papo na Web watsonx Assistant.

O uso de WebViews com uma ponte JavaScript é um padrão comum com uma implementação semelhante para todas as estruturas móveis.

Incluindo o bate-papo da web como um WebView

É possível incluir a interface de bate-papo da web como parte de uma página de seu aplicativo móvel ou como um painel separado que seu aplicativo abre.. Em qualquer caso, deve-se hospedar uma página HTML que inclua o script de integração de bate-papo da web e, em seguida, incluir essa página como uma WebView em seu app.

No script de integração, use a opção showLauncher para ocultar o ícone do ativador de bate-papo da web, e a opção openChatByDefault para abrir o bate-papo da web automaticamente quando a página for carregada Na maioria dos casos, você também desejará usar a opção hideCloseButton e usar os controles nativos de seu app para controlar como a página ou o painel de bate-papo da web é fechado Para obter mais informações sobre as opções de configuração que podem ser especificadas no script de integração, consulte a Referência da API de bate-papo da web

O exemplo a seguir mostra um script integrado que inclui estas opções de configuração:

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

Em seu aplicativo, certifique-se de incluir lógica para ocultar o mecanismo de ativação do bate-papo da Web quando o dispositivo estiver off-line.. Se o dispositivo ficar off-line no meio de uma conversa, ocorrerão mensagens de erro apropriadas e novas tentativas.

Usando uma ponte JavaScript

Em algumas situações, seu aplicativo móvel pode precisar se comunicar com o bate-papo da web do watsonx Assistant. Por exemplo, pode ser necessário configurar dados de contexto iniciais (como um ID do usuário ou informações de conta) ou usar o recurso de segurança de bate-papo da Web... Para isso, é possível usar uma ponte JavaScript.

Uma ponte JavaScript é um padrão comum que pode ser usado em todas as plataformas móveis. Os detalhes da implementação diferem de uma estrutura de aplicativo móvel para outra; é possível localizar exemplos específicos sobre como implementar uma ponte JavaScript para a estrutura que você está usando No entanto, o conceito principal de envio de eventos entre o aplicativo móvel e o bate-papo da web se aplica a todas as estruturas.

Com uma ponte JavaScript, os eventos são enviados entre o aplicativo móvel e o WebView, e existem ouvintes de eventos em ambos os lados da ponte para lidar com esses eventos. Cada evento transporta uma carga útil da mensagem; como essa carga útil é somente texto, deve-se sequenciar e analisar objetos JSON para transmitir dados para frente e para trás

Se o seu aplicativo móvel precisar chamar um método de instância de bate-papo da web, você deverá chamar o método enviando um evento do app para o WebView usando a ponte de JavaScript Da mesma forma, se você precisar executar o código em seu aplicativo móvel em resposta ao comportamento no bate-papo da web, será possível enviar um evento por meio da ponte JavaScript do bate-papo da web para o seu aplicativo móvel

É possível usar o tipo de resposta user_defined e o evento customResponse para gerar comportamento em seu aplicativo móvel. No entanto, deve-se remover a propriedade event.data.element do evento antes de passá-la pela ponte JavaScript. Remover essa propriedade é necessário porque ela contém um elemento HTML, que não pode ser em sequência. Qualquer uso do tipo de resposta user_defined para gravar novas visualizações no bate-papo da Web deve ser gravado em HTML e JavaScript, e manipulado dentro do WebView (Para obter mais informações sobre o evento customResponse, consulte a Referência da API de bate-papo da Web.).).