Partager via

Personnaliser les widgets de chat en direct pour les applications mobiles

Vous avez deux options pour intégrer la messagerie dans votre application mobile native :

  • Utiliser des kits de développement logiciel (SDK) mobiles natifs pour iOS et Android
  • Utiliser le widget Web à l’intérieur d’une WebView

Nous vous recommandons vivement d’utiliser les SDK mobiles natifs, car ils offrent une prise en charge des fonctionnalités et des performances supérieures.

Intégration avec les SDK mobiles Dynamics 365 Contact Center

Les SDK mobiles et leur documentation sont hébergés sur GitHub :

Les SDK contiennent les éléments suivants :

  • Un exemple d’application pour vous aider à démarrer
  • Une interface de messagerie configurable et prête à l’emploi
  • Un ensemble complet de fonctions de cycle de vie de la messagerie pour l’intégration d’une interface utilisateur de messagerie sur mesure, si vous le souhaitez
  • Prise en charge des notifications Push avec Azure Notification Hub

Nous vous recommandons d’utiliser une conversation authentifiée et persistante avec les SDK de messagerie. Cela offre la meilleure expérience client pour les modèles d’utilisation mobile.

Note

L’interface prête à l’emploi est stylisée visuellement à l’aide du code de votre application plutôt que du centre d’administration.

Affichage du widget de chat en direct à l’aide de code intégré

Si les SDK de messagerie mobile ne répondent pas à vos besoins ou à vos délais, vous pouvez intégrer un widget Web dans votre application mobile. Cependant, l’intégration d’un code de widget de chat présente de nombreuses limitations, telles que des performances réduites, une ergonomie mobile limitée et des fonctionnalités indisponibles.

A WebView est un navigateur intégré qui permet à une application native d’afficher du contenu Web. Utilisez le composant de la WebView langue de votre système d’exploitation mobile pour activer le rendu de la version Web du widget de chat sur les appareils mobiles. La fonctionnalité WebView est offerte à la fois sur Android et iOS.

L’exemple de code suivant affiche le widget de chat dans une application mobile.

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)

Le widget de chat utilise le stockage local pour gérer son état. Pour que le widget de chat puisse accéder au stockage local sur Android, vous devez configurer une autorisation dans le code natif.

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

Vous pouvez optimiser le rendu du widget de chat pour l’expérience web mobile à l’aide de balises de données telles que data-hide-chat-button et data-render-mobile, ainsi que de quelques API et événements fournis par le SDK client du widget de chat en direct. Pour plus d’informations : Personnaliser un widget de chat à l’aide de balises de données

Pour ouvrir une session de chat, vous pouvez appeler la méthode startChat lorsque le nouveau bouton de chat est sélectionné.

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

Vous pouvez utiliser la data-render-mobile balise data pour optimiser le rendu du widget de chat en direct sur mobile. Par exemple, il masque l’en-tête du widget de chat. En plus de l’en-tête, le bouton Fermer (X) disparaît également. Pour fermer le chat, vous devez créer un bouton « terminer le chat » dans l’application mobile et appeler la méthode closeChat sur l’événement de clic.

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

Le code précédent couvre le scénario dans lequel l’utilisateur de l’application mobile met fin au chat. Toutefois, dans un autre scénario, où un agent met fin à la conversation, vous pouvez écouter l’événement lcw :threadUpdate et appeler la méthode closeChat pour mettre fin à la conversation côté client, comme illustré dans le code suivant.

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

Lorsque le chat est fermé, le widget de chat en direct déclenche l’événement lcw :closeChat . Vous pouvez écouter cet événement et effectuer les étapes post-chat si nécessaire.

Note

Les fonctionnalités du widget de chat en direct, telles que l’escalade vers la voix et la vidéo et le téléchargement de la transcription du chat, ne sont pas prises en charge via une vue Web.

Référence du SDK de conversation instantanée en direct
Développer des widgets de chat en direct personnalisés
startChat
fermerChat
lcw :chatRécupéré
lcw :chatEn file d’attente
Personnaliser les widgets de chat en direct à l’aide de balises de données

  • Last updated on