Compartir a través de

Personalizar los widgets de chat en directo para aplicaciones móviles

  • Artículo

Si el SDK de chat en vivo no cumple con sus requisitos, puede insertar un código widget en su aplicación móvil. Sin embargo, incrustar un código de chat widget tiene muchas limitaciones, como un rendimiento reducido, una usabilidad móvil limitada y funciones no disponibles.

Nota

Las características del widget de chat en vivo, escalar a voz y vídeo, y descargar la transcripción del chat, no son compatibles con las aplicaciones móviles.

Representar el widget de chat en directo mediante código insertado

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

El siguiente código de muestra representa el chat widget 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 almacenamiento local para gestionar 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 el uso de etiquetas de datos como data-hide-chat-button y data-render-mobile, junto con algunas API y eventos proporcionados por el SDK del cliente de widget de chat en directo. 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 seleccione el botón de nuevo chat.

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

Puedes usar la etiqueta de datos data-render-mobile para optimizar la representación del widget de chat en directo en el móvil. Por ejemplo, oculta el encabezado del widget del chat. Junto con el encabezado, también desaparece el botón Cerrar (X). 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, cuando 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 del 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 directo activa el evento lcw:closeChat. Puede escuchar este evento y realizar los pasos posteriores al chat si es necesario.

Consulte también

Referencia de las SDK de chat activo
Desarrollar widgets de chat en vivo personalizado
startChat
closeChat
lcw:chatRetrieved
lcw:chatQueued
Personalice los widgets de chat en vivo usando etiquetas de datos