Adaptive Card konfigurieren

Sie können Adaptive Card zum Anpassen eines Chatfensters verwenden. Adaptive Card zeigen Kontakten interaktive Informationen an. Sie ermöglichen Ihnen das Senden von Nachrichten mit Rich Text und Grafiken. Sie können außerdem Eingabesteuerungen und Schaltflächen einbeziehen, um Feedback von Benutzern zu erhalten, die die Karte ansehen.

Adaptive Card sind für die Kanäle Live-Chat Agenten und Kontakte interagieren in Echtzeit und Chatnachrichten Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten verfügbar. Adaptive Card werden zurzeit für die Bot-Kommunikation verwendet. Wenn Adaptive Card für Ihr System nicht aktiviert sind, wird ein Fallback-Text angezeigt. Wenden Sie sich an Ihren Kundenbetreuer, um Hilfe bei der Aktivierung dieser Funktion zu erhalten.

Adaptive Card im Chatfenster anzeigen

1. Klicken Sie auf den App-Selector und wählen SieACD.

2. Gehen Sie zu Digital > Kontaktstellen Digital.

3. Klicken Sie auf Chat.

4. Klicken Sie auf Anpassung für den Chat-Kanal, den Sie konfigurieren möchten.

5. Scrollen Sie nach unten zu "Anpassung (CSS und JS)“ und geben Sie den folgenden Text in das Textfeld Eigene CSS ein:

   
               button.ac-pushButton {

   color: #faac4b; 

   background: white;

   padding: 10px; 

   border: 1px solid; 

   border-radius: 10px; 

   cursor: pointer;

   }

6. Nehmen Sie Änderungen und Anpassungen vor, bis Sie mit dem Format und Erscheinungsbild von Adaptive Card zufrieden sind.

7. Geben Sie den folgenden Text in das Textfeld Eigene JS ein:

   
       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. Klicken Sie auf Save (Speichern).

Nach Hinzufügen von Adaptive Card zu einem Chat müssen Sie diese Testen, um sicherzustellen, dass sie richtig angezeigt werden. Sie können sie mithilfe von Bot Builder oder des Microsoft-Testtools testen.