Configurer les Adaptive Cards

Vous pouvez utiliser les Adaptive Cards pour personnaliser une fenêtre de clavardage. Les Adaptive Cards affichent des informations interactives aux contacts. Elles vous permettent d’envoyer des messages contenant du texte enrichi et des graphiques. Vous pouvez également inclure des commandes de saisie et des boutons pour recueillir les commentaires des utilisateurs qui consultent la carte.

Les Adaptive Cards sont disponibles pour les canauxLive Chat Les agents et les contacts interagissent en temps réel. et Chat Messaging Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Actuellement, les Adaptive Card sont utilisées pour la communication entre les robots. Si les Adaptive Card ne sont pas activées pour votre système, un texte de repli s’affiche. Communiquez avec votre représentant de compte pour obtenir de l’aide afin d’activer cette fonctionnalité.

Afficher les Adaptive Cards dans la fenêtre de clavardage

1. Cliquez sur le sélecteur d'applications et sélectionnez ACD.

2. Allez à Digital > Points de contact Digital.

3. Cliquez sur Clavardage.

4. Cliquez sur Personnalisation pour le canal de clavardage que vous souhaitez configurer.

5. Faites défiler vers le bas jusqu’à Customization (CSS and JS) et entrez le texte suivant dans la zone de texte Custom CSS :

   
   
               button.ac-pushButton {

   color: #faac4b; 

   background: white;

   padding: 10px; 

   border: 1px solid; 

   border-radius: 10px; 

   cursor: pointer;

   }

6. Apportez des modifications et des personnalisations jusqu’à ce que vous soyez satisfait du format et de l’apparence de la Adaptive Card.

7. Entrez le texte suivant dans la zone de texte 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. Cliquez sur Enregistrer.

Après avoir ajouté des Adaptive Cards à un clavardage, vous devez les tester pour vous assurer qu’elles apparaissent correctement. Vous pouvez les tester à l’aide de Bot Builder ou de l’outil de tests Microsoft .