Freigeben über

Anpassen von Live-Chat-Widgets für mobile Apps

Sie haben zwei Möglichkeiten, Messaging in Ihre native mobile App zu integrieren:

  • Verwenden Sie native mobile Software Development Kits (SDKs) für iOS und Android
  • Verwenden des Web Widgets in einer WebView

Es wird dringend empfohlen, die nativen SDKs für Mobilgeräte zu verwenden, da sie eine hervorragende Funktionsunterstützung und Leistung bieten.

Integration mit den mobilen SDKs von Dynamics 365 Contact Center

Die mobilen SDKs und ihre Dokumentation werden auf GitHub gehostet:

Die SDKs enthalten:

  • Eine Beispielanwendung, die Ihnen den Einstieg erleichtert
  • Eine konfigurierbare, sofort einsatzbereite Messaging-Schnittstelle
  • Ein vollständiger Satz von Messaging-Lebenszyklusfunktionen zur Integration einer maßgeschneiderten Messaging-Benutzeroberfläche, falls gewünscht
  • Unterstützung für Pushbenachrichtigungen mit Azure Notification Hub

Es wird empfohlen, authentifizierten, persistenten Chat mit den Messaging-SDKs zu verwenden. Dies bietet das beste Kundenerlebnis für mobile Nutzungsmuster.

Hinweis

Die vorkonfigurierte Benutzeroberfläche wird visuell durch Code in Ihrer Anwendung und nicht über das Admin Center gestaltet.

Rendern des Live-Chat-Widgets mit eingebettetem Code

Wenn die Mobile Messaging SDKs nicht Ihren Anforderungen oder Zeitplänen entsprechen, können Sie ein Web-Widget in Ihre mobile App einbetten. Das Einbetten eines Chat-Widget-Codes weist jedoch viele Einschränkungen auf, wie z. B. eine verringerte Leistung, eine eingeschränkte mobile Benutzerfreundlichkeit und nicht verfügbare Funktionen.

A WebView ist ein eingebetteter Browser, der es einer nativen Anwendung ermöglicht, Webinhalte anzuzeigen. Verwenden Sie die WebView Komponente der Sprache Ihres mobilen Betriebssystems, um das Rendern der Webversion des Chat-Widgets auf mobilen Geräten zu aktivieren. Die WebView-Funktion wird sowohl auf Android als auch auf 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 eine Berechtigung im nativen Code konfigurieren.

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

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

Um eine Chatsitzung zu öffnen, können Sie die startChat-Methode aufrufen, wenn die neue Chatschaltfläche ausgewählt ist.

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

Sie können das data-render-mobile Daten-Tag verwenden, um das Rendering des Live-Chat-Widgets auf Mobilgeräten zu optimieren. Zum Beispiel blendet es die Kopfzeile des Chat-Widgets aus. Zusammen mit der Kopfzeile verschwindet auch die Schaltfläche Schließen (X). Um den Chat zu schließen, müssen Sie in der mobilen App eine Schaltfläche "Chat beenden" erstellen und die closeChat-Methode für das Klickereignis aufrufen.

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

Der vorangehende Code behandelt das Szenario, in dem der Benutzer der mobilen App den Chat beendet. In einem anderen Szenario, in dem ein Agent die Unterhaltung beendet, können Sie jedoch auf das lcw:threadUpdate-Ereignis lauschen und die closeChat-Methode aufrufen, um die Unterhaltung auf der Clientseite zu beenden, wie im folgenden Code gezeigt.

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

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

Hinweis

Live-Chat-Widget-Funktionen wie die Eskalation auf Sprache und Video und das Herunterladen des Chat-Transkripts werden über eine Webansicht nicht unterstützt.

Livechat SDK Referenz
Entwickeln Sie benutzerdefinierte Live-Chat-Widgets
startChat
schließenChat
lcw:chatAbgerufen
lcw:chatIn der Warteschlange
Passen Sie Live-Chat-Widgets mithilfe von Daten-Tags an

  • Last updated on