この記事で伝えたいこと

オペレータが、お客さまがどのページを直前まで見て、連絡したのか把握できる

Dynamics 365 Customer Service と Power Apps ポータルを組み合わせて実現可能（標準機能）-

どういったシーンで便利か？
　→　チャットボット会話後に、人につないだあとに繰返し説明したくない。
　→　オペレータ側でお客さまが直前まで見ていたページを把握できる。

利用シーン

↑赤枠のリンクをクリックすると
直前まで見ていたポータルのサイトがわかる！↓ポータルイメージ。

設定手順

1. 会話の概要で顧客のアクションのセルフサービス設定を有効にする。

2.Power Apps Portalのチャットウジェットにhtmlを設定する。

2.1 Power Apps ポータル管理アプリを開く。

2.2 チャットウジェットに以下htmlを設定する。

Chat Widget Code.html

<script id="Test">
        //チャットがロードされた際にSelfServiceタブ作成をするための初期化
        window.addEventListener("lcw:ready", function TestLee() {
            var SelfService;
            var selfServiceString = sessionStorage.getItem("SelfService");
            if (selfServiceString == null) {
                SelfService = [];
            }
            else {
                SelfService = JSON.parse(selfServiceString);
                if (SelfService.length == 4) {
                    SelfService.pop();
                }
            }

            // ここからナビゲーションの設定（Tabの中からの内容）
            var title = $('h1')[0];
            var innerHTML = title.innerHTML;
            var navigation = {
                "msdyn_displaytitle": "Page visited",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350000",
                "msdyn_displaytitle": "Phrase searched",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350001",
                "msdyn_displaytitle": "Knowledge article viewed",
                "msdyn_url": window.location.href,
                "msdyn_starttime": new Date().toISOString(),
                "msdyn_type": "192350002"            
            }            
            SelfService.unshift(navigation);
            sessionStorage.setItem("SelfService", JSON.stringify(SelfService));

            // イベントハンドラ 戻り値は TestLee関数にセット
            if (Microsoft.Omnichannel) {
                var occontext = Microsoft.Omnichannel.LiveChatWidget.SDK.getContextProvider();
                Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function TestLee() {
                    var selfServiceTracked = sessionStorage.getItem("SelfService");
                    var ocSelfService = JSON.parse(selfServiceTracked);
                    return {
                        'SelfService': { 'value': JSON.stringify(ocSelfService) }
                    };
                });
            }
        });    
        //bodyからはチャットWidgetのロード
    </script>

    // Dynamics 365 Customer Serviceのチャット作成時に生成したコードをそのまま張り付ける。サンプル記載です。
    <script id="Microsoft_Omnichannel_LCWidget" src="https://oc-cdn-public-apj.azureedge.net/livechatwidget/scripts/LiveChatBootstrapper.js" data-app-id="cadXXXX4-62d9-4472-a497-04e60a9a03bd" data-lcw-version="prod" data-org-id="XXXXXXXX-cXXX-XXX-a1bb-8d78fe1c46cc" data-org-url="https://XXXXXXX-crm.omnichannelengagementhub.com"></script>

参考Docs

・会話の概要で顧客のアクションのセルフサービス設定を有効にする。

・サンプルソース