Configure Adaptive Cards

You can use Adaptive Cards to customize a chat window. Adaptive Cards display interactive information to contacts. They allow you to send messages with rich text and graphics. You can also include input controls and buttons to gather feedback from users who view the card.

Adaptive Cards are available forLive Chat Agents and contacts interact on a real-time basis and Chat Messaging Asynchronous chat in which contacts send a chat message anytime and wait for a reply channels. Currently, Adaptive Cards are used for bot communication. If Adaptive Cards aren't enabled for your system, fallback text appears. Contact your CXone Account Representative for help enabling this capability.

Display Adaptive Cards in Chat Window

1. Click the app selector and select ACD.

2. Go to Digital > Points of Contact Digital.

3. Click Chat.

4. Click Customization for the chat channel you want to configure.

5. Scroll down to Customization (CSS and JS) and enter the following text in the Custom CSS text box:

   
               button.ac-pushButton {

   color: #faac4b; 

   background: white;

   padding: 10px; 

   border: 1px solid; 

   border-radius: 10px; 

   cursor: pointer;

   }

6. Make changes and customizations until you are happy with the format and appearance of the Adaptive Card.

7. Enter the following text in the Custom JS text box:

   
       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. Click Save.

After you add Adaptive Cards to a chat, you must test them to make sure they appear correctly. You can test them using Bot Builder or the Microsoft testing tool .