Udostępnij przez

Dostosowywanie widżetów czatu na żywo dla aplikacji mobilnych

Dostępne są dwie opcje integracji wiadomości z natywną aplikacją mobilną:

  • Korzystaj z natywnych zestawów SDK (SDK) dla systemów iOS i Android
  • Korzystanie z widżetu internetowego w elemencie WebView

Zdecydowanie zalecamy korzystanie z natywnych pakietów SDK dla urządzeń przenośnych, ponieważ zapewniają one doskonałą obsługę funkcji i wydajność.

Integracja z mobilnymi zestawami SDK Dynamics 365 Contact Center

Mobilne zestawy SDK i ich dokumentacja są hostowane w usłudze GitHub:

Zestawy SDK zawierają:

  • Przykładowa aplikacja, która pomoże Ci rozpocząć pracę
  • Konfigurowalny, gotowy do użycia interfejs do przesyłania wiadomości
  • Pełny zestaw funkcji cyklu życia wiadomości do integracji dostosowanego do potrzeb użytkownika interfejsu użytkownika wiadomości
  • Obsługa powiadomień wypychanych za pomocą usługi Azure Notification Hub

Zalecamy korzystanie z uwierzytelnionego, trwałego czatu z pakietami SDK do obsługi wiadomości. Zapewnia to najlepszą obsługę klienta w przypadku wzorców korzystania z urządzeń mobilnych.

Uwaga / Notatka

Gotowy do użycia interfejs jest stylizowany wizualnie za pomocą kodu w aplikacji, a nie za pośrednictwem centrum administracyjnego.

Renderowanie widżetu czatu na żywo przy użyciu osadzonego kodu

Jeśli pakiety SDK do obsługi wiadomości mobilnych nie spełniają Twoich wymagań lub harmonogramów, możesz osadzić widżet internetowy w swojej aplikacji mobilnej. Jednak osadzanie kodu widżetu czatu ma wiele ograniczeń, takich jak zmniejszona wydajność, ograniczona użyteczność mobilna i niedostępne funkcje.

A WebView to wbudowana przeglądarka, która umożliwia natywnej aplikacji wyświetlanie treści internetowych. Użyj komponentu WebView języka mobilnego systemu operacyjnego, aby włączyć renderowanie internetowej wersji widżetu czatu na urządzeniach mobilnych. Funkcja WebView jest oferowana zarówno w systemie Android, jak i iOS.

Poniższy przykładowy kod renderuje widżet czatu w aplikacji mobilnej.

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)

Widżet czatu korzysta z pamięci lokalnej do zarządzania swoim stanem. Aby widżet czatu mógł uzyskać dostęp do pamięci lokalnej w systemie Android, musisz skonfigurować uprawnienie w kodzie natywnym.

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

Możesz zoptymalizować renderowanie widżetu czatu pod kątem mobilnego środowiska internetowego, używając tagów danych, takich jak data-hide-chat-button i data-render-mobile, wraz z kilkoma interfejsami API i zdarzeniami udostępnianymi przez zestaw SDK klienta widżetu czatu na żywo. Więcej informacji: Dostosowywanie widżetu czatu przy użyciu tagów danych

Aby otworzyć sesję czatu, możesz wywołać metodę startChat po wybraniu nowego przycisku czatu.

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

Możesz użyć tagu data-render-mobile danych, aby zoptymalizować renderowanie widżetu czatu na żywo na urządzeniu mobilnym. Na przykład ukrywa nagłówek widżetu czatu. Wraz z nagłówkiem znika również przycisk Zamknij (X). Aby zamknąć czat, musisz utworzyć przycisk "zakończ czat" w aplikacji mobilnej i wywołać metodę closeChat w zdarzeniu kliknięcia.

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

Powyższy kod obejmuje scenariusz, w którym użytkownik aplikacji mobilnej kończy czat. Jednak w innym scenariuszu, w którym agent kończy konwersację, można nasłuchiwać zdarzenia lcw:threadUpdate i wywołać metodę closeChat , aby zakończyć konwersację po stronie klienta, jak pokazano w poniższym kodzie.

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

Gdy czat zostanie zamknięty, widget czatu na żywo wyzwala zdarzenie lcw:closeChat . Możesz nasłuchiwać tego wydarzenia i w razie potrzeby wykonać wszelkie kroki po czacie.

Uwaga / Notatka

Funkcje widżetu czatu na żywo, takie jak eskalacja do głosu i wideo oraz pobieranie transkrypcji czatu, nie są obsługiwane za pośrednictwem widoku internetowego.

Dokumentacja zestawu SDK czatu na żywo
Tworzenie niestandardowych widżetów czatu na żywo
startCzat
closeCzat
lcw:chatPobrane
lcw:czat w kolejce
Dostosowywanie widżetów czatu na żywo za pomocą tagów danych

  • Last updated on