通过

为移动应用自定义实时聊天小组件

您有两个选项可用于在本机移动应用程序中集成消息传递：

  • 使用适用于 iOS 和 Android 的原生移动软件开发工具包 （SDK）
  • 在 WebView 中使用 Web 小组件

我们强烈建议您使用原生移动 SDK，因为它们提供卓越的功能支持和性能。

与 Dynamics 365 Contact Center 移动 SDK 集成

移动 SDK 及其文档托管在 GitHub 上：

SDK 包含：

  • 帮助您入门的示例应用程序
  • 可配置的开箱即用消息传递界面
  • 一整套消息传递生命周期功能，用于集成定制消息传递 UI（如果需要）
  • 支持 Azure 通知中心的推送通知

建议将经过身份验证的持久聊天与消息传递 SDK 配合使用。 这为移动使用模式提供了最佳的客户体验。

注释

现成界面通过应用程序中的代码而不是通过管理中心进行直观样式设置。

使用嵌入式代码呈现实时聊天小组件

如果移动消息传递 SDK 不符合您的要求或时间表，则可以在移动应用程序中嵌入 Web 小组件。 然而，嵌入聊天小部件代码有许多限制，例如性能下降、移动可用性有限以及功能不可用。

A WebView 是一种嵌入式浏览器，使本机应用程序能够显示 Web 内容。 使用移动作系统语言的组件在 WebView 移动设备上启用聊天小组件的 Web 版本的呈现。 WebView 功能在 Android 和 iOS 上均提供。

以下示例代码在移动应用程序中呈现聊天小组件。

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)

聊天小部件使用本地存储来管理其状态。 要让聊天小部件访问 Android 上的本地存储，您需要在本机代码中配置权限。

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

您可以使用数据标记（如 data-hide-chat-button 和 data-render-mobile）以及实时聊天小组件客户端 SDK 提供的一些 API 和事件来优化聊天小组件的呈现，以实现移动 Web 体验。 详细信息： 使用数据标记自定义聊天小组件

若要打开聊天会话，可以在选择新聊天按钮时调用 startChat 方法。

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

您可以使用 data-render-mobile data 标签来优化移动设备上实时聊天小部件的呈现。 例如，它隐藏了聊天小部件的标题。 与标题一起， 关闭 （X） 按钮也会消失。 要关闭聊天，您必须在移动应用程序中创建一个“结束聊天”按钮，并在点击事件上调用 closeChat 方法。

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

前面的代码涵盖了移动应用的用户结束聊天的方案。 但是，在另一种情况下，代理结束对话，您可以监听 lcw：threadUpdate 事件并调用 closeChat 方法从客户端结束对话，如以下代码所示。

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

当聊天关闭时，实时聊天小部件会触发 lcw：closeChat 事件。 您可以监听此事件，并根据需要执行任何聊天后步骤。

注释

通过 Web 视图不支持实时聊天小组件功能，例如升级为语音和视频以及下载聊天记录。

实时聊天 SDK 参考
开发自定义实时聊天小部件
startChat
closeChat
lcw：chatRetrieved
lcw:chatQueued
使用数据标签自定义实时聊天小部件

  • Last updated on