Personalitzar els ginys de xat en directe per a aplicacions mòbils

Teniu dues opcions per integrar la missatgeria a la vostra aplicació mòbil nativa:

  • Utilitzar kits de desenvolupament de programari mòbil (SDK) natius per a iOS i Android
  • Utilitzar el widget web dins d'una WebView

Us recomanem que utilitzeu els SDK mòbils natius perquè ofereixen suport i rendiment de funcions superiors.

Integrar-se amb els SDK mòbils del Dynamics 365 Contact Center

Els SDK mòbils i la seva documentació estan allotjats a GitHub:

Els SDK contenen:

  • Un exemple d'aplicació per ajudar-vos a començar
  • Una interfície de missatgeria configurable i fora de la caixa
  • Un conjunt complet de funcions de cicle de vida de missatgeria per integrar una interfície d'usuari de missatgeria a mida, si es desitja
  • Suport per a notificacions push amb Azure Notification Hub

Us recomanem que utilitzeu xat autenticat i persistent amb els SDK de missatgeria. Això proporciona la millor experiència de client per als patrons d'ús mòbil.

Nota

La interfície de fàbrica està dissenyada visualment mitjançant el codi de l'aplicació en lloc del centre d'administració.

Renderitzar el giny de xat en directe mitjançant codi incrustat

Si els SDK de missatgeria mòbil no compleixen els vostres requisits o terminis, podeu inserir un widget web a l'aplicació mòbil. Tanmateix, incrustar un codi de giny de xat té moltes limitacions, com ara un rendiment reduït, una usabilitat mòbil limitada i funcions no disponibles.

A WebView és un navegador incrustat que permet que una aplicació nativa mostri contingut web. Utilitzeu el component de l'idioma WebView del sistema operatiu mòbil per habilitar la representació de la versió web del giny de xat en dispositius mòbils. La capacitat WebView s'ofereix tant a Android com a iOS.

El codi d'exemple següent representa el giny de xat en una aplicació mòbil.

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 giny de xat utilitza l'emmagatzematge local per gestionar-ne l'estat. Perquè el giny de xat accedeixi a l'emmagatzematge local a Android, heu de configurar un permís al codi natiu.

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

Podeu optimitzar la representació del giny de xat per a l'experiència web mòbil mitjançant etiquetes de dades com data-hide-chat-button i data-render-mobile, juntament amb algunes API i esdeveniments proporcionats per l'SDK del client del giny de xat en directe. Més informació: Personalitzar un giny de xat mitjançant etiquetes de dades

Per obrir una sessió de xat, podeu trucar al mètode startChat quan se selecciona el botó de xat nou.

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

Podeu utilitzar l'etiqueta data-render-mobile de dades per optimitzar la representació del giny de xat en directe al mòbil. Per exemple, amaga la capçalera del giny de xat. Juntament amb la capçalera, el botó Tanca (X) també desapareix. Per tancar el xat, heu de crear un botó "finalitzar xat" a l'aplicació mòbil i trucar al mètode closeChat a l'esdeveniment de clic.

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

El codi anterior cobreix l'escenari en què l'usuari de l'aplicació mòbil finalitza el xat. Tanmateix, en un altre escenari, on un agent finalitza la conversa, podeu escoltar l'esdeveniment lcw:threadUpdate i cridar el mètode closeChat per finalitzar la conversa des del costat del client, tal com es mostra al codi següent.

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

Quan es tanca el xat, el giny de xat en directe activa l'esdeveniment lcw:closeChat . Podeu escoltar aquest esdeveniment i realitzar els passos posteriors al xat si cal.

Nota

Les funcions del giny de xat en directe, com ara l'escalada a veu i vídeo i la baixada de la transcripció del xat, no s'admeten a través d'una visualització web.

Referència de l'SDK de xat en directe
Desenvolupar ginys de xat en directe personalitzats
startChat
closeXat
lcw:xatRecuperat
lcw:chatA la cua
Personalitzar els ginys de xat en directe mitjançant etiquetes de dades

  • Last updated on