アダプティブカードを設定する

アダプティブカードを使ってチャットウィンドウをカスタマイズできます。アダプティブカードは、コンタクトにインタラクティブな情報を表示します。リッチテキストとグラフィックでメッセージを送ることができます。また、カードを見たユーザーからのフィードバックを集めるために、入力コントロールやボタンを含めることもできます。

アダプティブカードは、ライブチャット閉じた エージェントと連絡先はリアルタイムで対話しますやチャットメッセージング閉じた 連絡先がいつでもチャットメッセージを送信し、返信を待つ非同期チャットチャネルで利用可能です。現在、ボットとのコミュニケーションにはアダプティブカードが使われています。お使いのシステムでアダプティブカードが有効になっていない場合、フォールバックテキストが表示されます。この機能の有効化についてのサポートは、CXoneアカウント担当者までお問い合わせください。

アダプティブカードをチャットウィンドウに表示する

  1. アプリセレクターをクリックして、選択ACD。

  2. デジタルに移動 > ポイントオブコンタクト(PoC)デジタル。

  3. チャットをクリックします。

  4. 設定するチャットチャネル用のカスタマイズをクリックします。

  5. カスタマイズ(CSSとJS)までスクロールダウンし、カスタムCSSテキストボックスに以下のテキストを入力します：

    
            button.ac-pushButton {
    color: #faac4b; 
    background: white;
    padding: 10px; 
    border: 1px solid; 
    border-radius: 10px; 
    cursor: pointer;

    }

  6. アダプティブカードのフォーマットや外観に満足できるまで、変更やカスタマイズを行います。

  7. Custom JSテキストボックスに以下のテキストを入力します：

    
    window.addEventListener('load', function() {
    if (!window.MutationObserver) {
    return;
    }
    var iframeObserver = new MutationObserver(function(){
    var button = document.querySelector('.ac-pushButton');
    if (button) {
    button.onclick = function () {
    alert('roshan');
    };
    }
    });
    iframeObserver.observe(document.body, {
    attributes: true,
    subtree: true,
    childList: false,
    characterData: false
    });
    });

  8. 保存をクリックします。

アダプティブカードをチャットに追加したら、これをテストして正しく表示されることを確認する必要があります。テストにはボットビルダーまたはMicrosoftテストツール中央から右上に矢印が向いている正方形。を使用できます。