Personnaliser les widgets de conversation instantanée pour les applications mobiles

  • Article

Si le SDK de conversation instantanée en direct ne répond pas à vos besoins, vous pouvez intégrer un code de widget dans votre application mobile. Cependant, l’intégration d’un code de widget de conversation instantanée présente de nombreuses limitations telles que des performances réduites, une utilisation mobile limitée et des fonctionnalités non disponibles.

Note

Les fonctionnalités du widget de conversation instantanée en direct (passage à la voix et à la vidéo, téléchargement de la transcription de la conversation) ne sont pas pris en charge sur les applications mobiles.

Rendre le widget Conversation instantanée en utilisant le code intégré

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

L’exemple de code suivant affiche le widget de conversation instantanée 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 discussion utilise le stockage local pour gérer son état. Pour que le widget de discussion 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 conversation pour une expérience Web mobile en utilisant des balises de données telles que data-hide-chat-button et data-render-mobile, ainsi que quelques API et événements fournis par le SDK client de widget Conversation instantanée. Plus d’informations : Personnaliser un widget de conversation à l’aide des balises de données

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

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

Vous pouvez utiliser la balise de données data-render-mobile pour optimiser le rendu du widget de conversation instantanée sur mobile. Par exemple, il masque l’en-tête du widget de conversation. Le bouton Fermer (X) disparaît en même temps que l’en-tête. Pour fermer la conversation, vous devez créer un bouton « Mettre fin à la conversation » dans l’application mobile et appeler la méthode closeChat au moment de 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 à la discussion. Cependant, dans un autre scénario, lorsqu’un agent met fin à la conversation, vous pouvez écouter l’événement lcw:threadUpdate et appelez la méthode closeChat pour mettre fin à la conversation côté client, comme indiqué dans le code suivant.

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

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

Voir aussi

Référence du SDK de conversation instantanée en direct
Développer un widget personnalisé de conversation instantanée en direct
startChat
closeChat
lcw:chatRetrieved
lcw:chatQueued
Personnaliser les widgets de conversation instantanée en direct à l’aide de balises de données