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

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

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

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

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

  2. Digital>ポイントオブコンタクト(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. [保存]をクリックします。

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