Compartir a través de

Personalización de widgets de chat en directo para aplicaciones móviles

Tiene dos opciones para integrar la mensajería en su aplicación móvil nativa:

  • Usar kits de desarrollo de software (SDK) móviles nativos para iOS y Android
  • Usar el widget web dentro de un WebView

Se recomienda encarecidamente usar los SDK móviles nativos porque ofrecen compatibilidad y rendimiento de características superiores.

Integración con los SDK móviles de Dynamics 365 Contact Center

Los SDK móviles y su documentación están alojados en GitHub:

Los SDK contienen:

  • Una aplicación de ejemplo para ayudarlo a comenzar
  • Una interfaz de mensajería configurable y lista para usar
  • Un conjunto completo de funciones de ciclo de vida de mensajería para integrar una interfaz de usuario de mensajería personalizada, si lo desea
  • Compatibilidad con notificaciones push con el Centro de notificaciones de Azure

Se recomienda usar el chat autenticado y persistente con los SDK de mensajería. Esto proporciona la mejor experiencia al cliente para los patrones de uso móvil.

Nota:

La interfaz lista para usar se diseña visualmente a través del código de la aplicación en lugar de a través del centro de administración.

Renderizar el widget de chat en vivo usando código incrustado

Si los SDK de mensajería móvil no cumplen con sus requisitos o plazos, puede incrustar un widget web en su aplicación móvil. Sin embargo, incrustar un código de widget de chat tiene muchas limitaciones, como un rendimiento reducido, una usabilidad móvil limitada y funciones no disponibles.

A WebView es un navegador integrado que permite que una aplicación nativa muestre contenido web. Utilice el componente del idioma de su WebView sistema operativo móvil para habilitar la representación de la versión web del widget de chat en dispositivos móviles. La capacidad WebView se ofrece tanto en Android como en iOS.

El siguiente código de ejemplo representa el widget de chat en una aplicación móvil.

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)

El widget de chat utiliza el almacenamiento local para administrar su estado. Para que el widget de chat acceda al almacenamiento local en Android, debe configurar un permiso en el código nativo.

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

Puede optimizar la representación del widget de chat para la experiencia web móvil mediante etiquetas de datos como data-hide-chat-button y data-render-mobile, junto con algunas API y eventos proporcionados por el SDK del cliente del widget de chat en vivo. Más información: Personalizar un widget de chat mediante etiquetas de datos

Para abrir una sesión de chat, puede llamar al método startChat cuando se selecciona el nuevo botón de chat.

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

Puede utilizar la data-render-mobile etiqueta de datos para optimizar la representación del widget de chat en vivo en dispositivos móviles. Por ejemplo, oculta el encabezado del widget de chat. Junto con el encabezado, el botón Cerrar (X) también desaparece. Para cerrar el chat, debe crear un botón "finalizar chat" en la aplicación móvil y llamar al método closeChat en el evento de clic.

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

El código anterior cubre el escenario en el que el usuario de la aplicación móvil finaliza el chat. Sin embargo, en otro escenario, donde un agente finaliza la conversación, puede escuchar el evento lcw:threadUpdate y llamar al método closeChat para finalizar la conversación desde el lado cliente, como se muestra en el código siguiente.

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

Cuando se cierra el chat, el widget de chat en vivo activa el evento lcw:closeChat . Puede escuchar este evento y realizar los pasos posteriores al chat si es necesario.

Nota:

Las funciones del widget de chat en vivo, como escalar a voz y video y descargar la transcripción del chat, no son compatibles a través de una vista web.

Referencia de las SDK de chat activo
Desarrollar widgets de chat en vivo personalizados
startChat
cerrarChat
lcw:chatRecuperado
lcw:chatQueued
Personalizar widgets de chat en vivo usando etiquetas de datos

  • Last updated on