Configurer les Adaptive Cards

Vous pouvez utiliser des Adaptive Cards pour personnaliser une fenêtre de chat. Les Adaptive Cards affichent des informations interactives aux contacts. Ils vous permettent d'envoyer des messages avec du texte enrichi et des images. Vous pouvez également inclure les contrôles d'entrée et les boutons pour collecter les retours des utilisateurs qui consultent la carte.

Les Adaptive Cards sont disponibles pour les canaux Live 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 Cards sont utilisés pour la communication avec les bots. Si les Adaptive Cards ne sont pas activés pour votre système, le texte DE repli s'affiche. Contactez votre représentant de compte pour obtenir de l'aide concernant l'activation de cette fonctionnalité.

Affichage des Adaptive Cards dans la fenêtre de chat

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

2. Accédez à Digital > Points de Contact Digital.

3. Cliquez sur Discuter.

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

5. Faites défiler l’écran jusqu’à Personnalisation (CSS et JS) et entrez le texte suivant dans la zone de texte CSS personnalisé :

   
               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 le format et l’aspect de la Adaptive Card soient satisfaisants.

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.

Une fois les Adaptive Cards ajoutées au chat, vous devez tester chacune d’entre elles pour vous assurer qu’elles s’affichent correctement. Vous pouvez les tester à l'aide de Bot Builder ou de l'outil de tests Microsoft .