Freigeben über

Live-Chat-Widgets für mobile Apps anpassen

  • Artikel

Wenn das Live-Chat-SDK nicht Ihren Anforderungen entspricht, können Sie einen Widget-Code in Ihre mobile App einbetten. Das Einbetten eines Chat-Widget-Codes hat jedoch viele Einschränkungen, wie z. B. reduzierte Leistung, eingeschränkte mobile Nutzbarkeit und nicht verfügbare Funktionen.

Notiz

Live-Chat Widget-Funktionen Eskalation auf Sprache und Video und Herunterladen des Chat-Transkripts werden von mobilen Apps nicht unterstützt.

Rendern Sie das Live-Chat Widget mit eingebettetem Code

Ein WebView ist ein eingebetteter Browser, der es einer nativen Anwendung ermöglicht, Webinhalte anzuzeigen. Verwenden Sie die WebView Komponente Ihrer mobilen Betriebssystemsprache, um die Wiedergabe der Webversion des Chats Widget auf mobilen Geräten zu ermöglichen. Die WebView-Funktion wird sowohl auf Android als auch iOS angeboten.

Der folgende Beispielcode rendert das Chat Widget in einer mobilen Anwendung.

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)

Das Chat-Widget verwendet lokalen Speicher, um seinen Status zu verwalten. Damit das Chat-Widget auf den lokalen Speicher auf Android zugreifen kann, müssen Sie im nativen Code eine Berechtigung konfigurieren.

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

Sie können das Rendering des Chats Widget für das mobile Weberlebnis optimieren, indem Sie Daten-Tags wie data-hide-chat-button und data-render-mobile zusammen mit einigen APIs und Ereignissen verwenden, die vom Live-Chat Widget Client SDK bereitgestellt werden. Mehr Informationen: Anpassen eines Chat Widgets mithilfe von Datentags

Um eine Chat-Sitzung zu öffnen, können Sie auf die Chat beginnen Methode, wenn die neue Chat-Schaltfläche ausgewählt wird.

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

Sie können das data-render-mobile Datentag verwenden, um das Rendering des Live-Chats Widget auf dem Mobiltelefon zu optimieren. Beispielsweise blendet das Attribut den Header des Chat-Widgets aus. Zusätzlich zum Header wird auch die Schaltfläche Schließen (X) nicht mehr angezeigt. Um den Chat zu schließen, müssen Sie in der mobilen App eine Schaltfläche „Chat beenden“ erstellen und für das Klickereignis die Methode closeChat aufrufen.

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

Der vorangehende Code deckt das Szenario ab, in dem der Benutzer der mobilen App den Chat beendet. In einem anderen Szenario, in dem ein Agent das Gespräch beendet, können Sie jedoch auf das lcw:threadUpdate Ereignis hören und die close Chat -Methode aufrufen, um die Unterhaltung von der Clientseite aus zu beenden, wie im folgenden Code gezeigt.

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

Wenn der Chat geschlossen ist, löst das Live-Chat Widget das lcw:closeChat Ereignis aus. Sie können auf dieses Ereignis hören und bei Bedarf alle Schritte nach dem Chat ausführen.

Siehe auch

Livechat SDK Referenz
Entwickeln Sie benutzerdefinierte Live-Chat-Widgets
Chat beginnen
closeChat
lcw:chatRetrieved
lcw:chatQueued
Passen Sie Live-Chat-Widgets mithilfe von Daten-Tags an