Partilhar via

Personalize widgets de bate-papo 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.

Integração com os 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 aplicação para ajudá-lo a começar
  • Uma interface de mensagens configurável e pronta para uso
  • Um conjunto completo de funções do ciclo de vida do sistema de mensagens para integrar uma interface do 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 autenticado com os SDKs de mensagens. Isso proporciona a melhor experiência do cliente para padrões de uso de dispositivos móveis.

Observação

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

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

Se os SDKs de mensagens móveis não atenderem aos seus requisitos ou cronogramas, você poderá incorporar um widget da Web em seu aplicativo móvel. No entanto, incorporar 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 em Android e 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 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 tags de dados

Para abrir uma sessão de chat, você pode chamar o método startChat quando o novo botão de chat estiver 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 bate-papo ao vivo em dispositivos móveis. Por exemplo, ele oculta o cabeçalho do widget de chat. Junto com o cabeçalho, o botão Fechar (X) também desaparece. Para fechar o chat, você tem que criar um botão "terminar bate-papo" no aplicativo móvel e chamar o método closeChat no evento de clique.

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

O código anterior abrange o cenário em que o usuário do aplicativo móvel termina o bate-papo. No entanto, em outro cenário, onde um agente termina a conversa, você pode ouvir 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 dispara o evento lcw:closeChat . Você pode ouvir este evento e executar quaisquer etapas pós-bate-papo, se necessário.

Observação

Os recursos do widget de bate-papo ao vivo, como escalar para voz e vídeo e baixar a transcrição do bate-papo, não são suportados por meio de uma visualização da web.

Referência SDK do chat em direto
Desenvolva widgets de chat ao vivo personalizados
startChat
fecharChat
lcw:chatRecuperado
lcw:chatQueued
Personalize widgets de bate-papo ao vivo usando tags de dados

  • Last updated on