Compartilhar via

Personalizar widgets de chat ao vivo para aplicativos móveis

Você tem duas opções para integrar mensagens em seu aplicativo móvel nativo:

  • Use kits de desenvolvimento de software móvel (SDKs) nativos para iOS e Android
  • Usar o widget da Web dentro de um WebView

É altamente recomendável que você use os SDKs móveis nativos porque eles oferecem suporte e desempenho de recursos superiores.

Integrar-se aos SDKs móveis do Dynamics 365 Contact Center

Os SDKs móveis e sua documentação estão hospedados no GitHub:

Os SDKs contêm:

  • Um exemplo de aplicativo para ajudá-lo a começar
  • Uma interface de mensagens configurável e pronta para uso
  • Um conjunto completo de funções de ciclo de vida de mensagens para integrar uma interface de usuário de mensagens personalizada, se desejado
  • Suporte para notificações por push com o Hub de Notificação do Azure

Recomendamos que você use o chat persistente e autenticado com os SDKs de mensagens. Isso fornece a melhor experiência do cliente para padrões de uso móvel.

Observação

A interface pronta para uso é estilizada visualmente por meio de código em seu aplicativo, em vez de por meio do centro de administração.

Renderizar o widget de chat ao vivo usando código incorporado

Se os SDKs do Mobile Messaging não atenderem aos seus requisitos ou cronogramas, você poderá inserir um widget da web em seu aplicativo móvel. No entanto, a incorporação de um código de widget de chat tem muitas limitações, como desempenho reduzido, usabilidade móvel limitada e recursos indisponíveis.

A WebView é um navegador incorporado que permite que um aplicativo nativo exiba conteúdo da web. Use o WebView componente do idioma do sistema operacional móvel para habilitar a renderização da versão web do widget de chat em dispositivos móveis. O recurso WebView é oferecido no Android e no iOS.

O código de exemplo a seguir renderiza o widget de chat em um aplicativo móvel.

var html: String = """
        <html>
            <head>
                <meta http-equiv="no-cache">
                <meta http-equiv="Expires" content="-1">
                <meta http-equiv="Cache-Control" content="no-cache">
                <script 
                    type="text/javascript"
                    src = "Use src from widget code snippet"
                    id = Microsoft_Omnichannel_LCWidget
                    data-app-id = "Use data-app-Id from widget code snippet"
                    data-org-id = "Use data-org-Id from widget code snippet"
                    data-org-url = "Use data-org-url from widget code snippet"
                    data-render-mobile = "true"
                    data-hide-chat-button = "true"
                    data-color-override = "desired color code eg. #008577">
                </script>
            </head>
            <body>
            </body>
        </html>
    """.trimIndent()
    var baseUrl: String = "Get baseUrl from data-org-url eg. https://oc-cdn-ocprod.azureedge.net"
    chatWebView.loadDataWithBaseURL(baseUrl,html, "text/html", null, baseUrl)

O widget de chat usa o armazenamento local para gerenciar seu estado. Para que o widget de chat acesse o armazenamento local no Android, você precisa configurar uma permissão no código nativo.

chatWebView = findViewById(R.id.webview)
webSettings = webView.getSettings();
webSettings.setDomStorageEnabled(true);

Você pode otimizar a renderização do widget de chat para a experiência da Web móvel usando tags de dados como data-hide-chat-button e data-render-mobile, juntamente com algumas APIs e eventos fornecidos pelo SDK do cliente do widget de chat ao vivo. Para obter mais informações: Personalizar um widget de chat usando marcas de dados

Para abrir uma sessão de chat, você pode chamar o método startChat quando o novo botão de chat for selecionado.

chatWebView.evaluateJavascript(
    "Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();",
    null
)

Você pode usar a data-render-mobile tag de dados para otimizar a renderização do widget de chat ao vivo no celular. Por exemplo, ele oculta o cabeçalho do widget de bate-papo. Junto com o cabeçalho, o botão Fechar (X) também desaparece. Para fechar o chat, você precisa criar um botão "encerrar chat" no aplicativo móvel e chamar o método closeChat no evento click.

chatWebView.evaluateJavascript(
    "Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();", null)

O código anterior aborda o cenário em que o usuário do aplicativo móvel encerra o chat. No entanto, em outro cenário, em que um agente encerra a conversa, você pode escutar o evento lcw:threadUpdate e chamar o método closeChat para encerrar a conversa do lado do cliente, conforme mostrado no código a seguir.

chatWebView.evaluateJavascript(
    "window.addEventListener(\"lcw:threadUpdate\", function(){Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();})", null)

Quando o chat é fechado, o widget de chat ao vivo aciona o evento lcw:closeChat . Você pode ouvir esse evento e executar qualquer etapa pós-chat, se necessário.

Observação

Os recursos do widget de chat ao vivo, como escalar para voz e vídeo e baixar a transcrição do chat, não são compatíveis com uma visualização da web.

Referência de SDK do chat ao vivo
Desenvolva widgets de chat ao vivo personalizados
startChat
closeChat
lcw:chatRecuperado
lcw:chatQueued
Personalizar widgets de chat ao vivo usando tags de dados

  • Last updated on