次の方法で共有

モバイル アプリのライブ チャット ウィジェットをカスタマイズする

ネイティブモバイルアプリにメッセージングを統合するには、次の2つのオプションがあります。

  • iOS および Android 用のネイティブ モバイル ソフトウェア開発キット (SDK) を使用する
  • WebView 内で Web ウィジェットを使用する

ネイティブモバイルSDKは、優れた機能サポートとパフォーマンスを提供するため、使用することを強くお勧めします。

Dynamics 365 Contact Center モバイル SDK との統合

モバイル SDK とそのドキュメントは GitHub でホストされています。

SDK には次のものが含まれます。

  • 開始に役立つサンプルアプリケーション
  • 構成可能なすぐに使用できるメッセージングインターフェイス
  • 必要に応じて、特注のメッセージング UI を統合するためのメッセージング ライフサイクル機能の完全なセット
  • Azure Notification Hub でのプッシュ通知のサポート

メッセージング SDK で認証された常設チャットを使用することをお勧めします。 これにより、モバイルの使用パターンに最適な顧客エクスペリエンスが提供されます。

注

すぐに使用できるインターフェイスは、管理センターではなく、アプリケーションのコードを使用して視覚的にスタイル設定されます。

埋め込みコードを使用してライブチャットウィジェットをレンダリングする

モバイルメッセージングSDKが要件やタイムラインを満たさない場合は、モバイルアプリにWebウィジェットを埋め込むことができます。 ただし、チャット ウィジェット コードを埋め込むと、パフォーマンスの低下、モバイルの使いやすさの制限、機能の利用不可など、多くの制限があります。

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 とイベントを使用して、モバイルウェブエクスペリエンスのチャットウィジェットのレンダリングを最適化できます。 詳細: データ タグを使用してチャット ウィジェットをカスタマイズする

チャット セッションを開くには、新しいチャット ボタンが選択されているときに 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 ビューではサポートされていません。

ライブ チャット リファレンス
カスタムライブチャットウィジェットの開発
スタートチャット
closeChat
lcw:チャット取得[lcw:chat]
lcw:チャットキュー
データタグを使用したライブチャットウィジェットのカスタマイズ

  • Last updated on