Adaptive Cardを設定する

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

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

Adaptive Cardをチャットウィンドウに表示する

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. Adaptive Cardのフォーマットや外観に満足できるまで、変更やカスタマイズを行います。

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. [保存]をクリックします。

Adaptive Cardをチャットに追加したら、これをテストして正しく表示されることを確認する必要があります。 テストにはBot BuilderまたはMicrosoftテストツールを使用できます。