次の方法で共有

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

  • [アーティクル]

ライブ チャット SDK が要件を満たさない場合、モバイル アプリにウィジェットコードを埋め込むことができます。 しかし、チャット ウィジェット コードの埋め込みは、パフォーマンスの低下、モバイルでの操作性の制限、使用できない機能など、多くの制限があります。

Note

ライブ チャット ウィジェット機能—音声やビデオにエスカレートし、チャット記録をダウンロードすること—は、モバイル アプリではサポートされていません。

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

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);

ライブ チャット ウィジェット クライアント SDK が提供する API やイベントと一緒に data-hide-chat-button および data-render-mobile のようなデータ タグを使用して、モバイル Web エクスペリエンスで使用するチャット ウィジェットのレンダリングを最適化できます。 詳細: データ タグを使用してチャット ウィジェットをカスタマイズする

チャット セッションを開くには、[新規チャット] ボタンが選択されているときに startChat メソッドを呼び出します。

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

data-render-mobile データ タグを使用して、モバイルでライブ チャット ウィジェットのレンダリングを最適化することができます。 たとえば、チャット ウィジェットのヘッダーを非表示にします。 ヘッダーとともに、閉じる (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 イベントをトリガーします。 このイベントを聞き出し、必要に応じてチャット後の手順を実行できます。

参照

ライブ チャット リファレンス
カスタムラ イブ チャット ウィジェットの開発
startChat
closeChat
lcw:chatRetrieved
lcw:chatQueued
データ タグを使用してライブ チャット ウィジェットをカスタマイズする