Настройка мини-приложений динамического чата для мобильных приложений

У вас есть два варианта интеграции обмена сообщениями в ваше собственное мобильное приложение:

  • Использование нативных комплектов средств разработки мобильного программного обеспечения (SDK) для iOS и Android
  • Использование веб-виджета внутри WebView

Мы настоятельно рекомендуем использовать собственные мобильные SDK, так как они обеспечивают превосходную поддержку функций и производительность.

Интеграция с мобильными SDK Dynamics 365 Contact Center

Мобильные SDK и их документация размещены на GitHub:

SDK содержат:

  • Пример приложения, который поможет вам начать работу
  • Настраиваемый, готовый интерфейс обмена сообщениями
  • Полный набор функций жизненного цикла обмена сообщениями для интеграции индивидуального пользовательского интерфейса обмена сообщениями, если это необходимо
  • Поддержка push-уведомлений с помощью Центра уведомлений Azure

Мы рекомендуем использовать аутентифицированный постоянный чат с пакетами SDK для обмена сообщениями. Это обеспечивает наилучшее качество обслуживания клиентов для шаблонов использования мобильных устройств.

Замечание

Готовый интерфейс визуально оформляется с помощью кода в приложении, а не через центр администрирования.

Рендеринг виджета онлайн чата с помощью встроенного кода

Если SDK для мобильных сообщений не соответствуют вашим требованиям или срокам, вы можете встроить веб-виджет в свое мобильное приложение. Однако встраивание кода виджета чата имеет множество ограничений, таких как сниженная производительность, ограниченное удобство использования мобильных устройств и недоступные функции.

A WebView — это встроенный браузер, который позволяет нативному приложению отображать веб-содержимое. Используйте WebView компонент языка операционной системы вашего мобильного устройства, чтобы включить рендеринг веб-версии виджета чата на мобильных устройствах. Функция 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, а также несколько API и событий, предоставляемых клиентским SDK мини-приложения чата в реальном времени. Дополнительные сведения: Настройка виджета чата с помощью тегов данных

Чтобы открыть сеанс чата, можно вызвать метод 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 . Вы можете прослушать это событие и при необходимости выполнить любые действия после чата.

Замечание

Функции виджета чата в режиме реального времени, такие как голосовая связь и видео, а также загрузка стенограммы чата, не поддерживаются через веб-просмотр.

Справочник по SDK чата
Разработка пользовательских виджетов онлайн чата
начатьЧат
closeChat
lcw:chatRetrieved
lcw:chatQueued
Настройка виджетов онлайн чата с помощью тегов данных

  • Last updated on