Adaptive Cards

Bot Builder supports using Adaptive Cards in bot responses. You can use them in stories Used to train bot for interaction handling based on intent and context, rules Used to define bot's response to messages that don't change with context., and fallback A plain text alternative sent when the destination doesn't support rich media..

Developed by Microsoft, Adaptive Cards are a method of creating rich messaging Elements in digital messaging such as buttons, images, menus, and option pickers. content. They're an open card exchange format that allows you to send UI content in a common and consistent way. With Adaptive Cards, you can send interactive messages that are more complex and helpful than those containing only standard rich media elements.

Currently, only digital chat and Microsoft Teams channels support Adaptive Cards. If messages with Adaptive Cards are sent on other channels, the designated fallback A plain text alternative sent when the destination doesn't support rich media. text is used instead.

Bot Builder doesn't have any Adaptive Cards available by default. You must design your own using the Microsoft Adaptive Card designer, which is embedded in Bot Builder.

Using the Adaptive Card designer, you can create Adaptive Card templates to use with Bot Builder. When a bot executes a response that includes an Adaptive Card template, the template is dynamically completed with the information appropriate to that interaction and sent to the contact The person interacting with an agent, IVR, or bot in your contact center..

Adaptive Card Support by Channel

Adaptive Cards can only be used on channels that support them. Currently, they're supported on these channels:

• Digital chat
• Microsoft Teams

If your bot sends messages on channels that support Adaptive Cards as well as channels that don't, you must configure rich messaging fallback A plain text alternative sent when the destination doesn't support rich media.. The fallback is sent in place of the Adaptive Cardon channels that don't support them. You can configure rich messaging fallback for each bot response that uses Adaptive Cards.

Adaptive Card Designer

The Adaptive Card designer allows you to create Adaptive Card templates to use with Bot Builder. When you create a story, rule, or fallback, you can add the Adaptive Card bot action, then choose one of the Adaptive Cards you created.

You can use any available Adaptive Card elements in the cards you develop. To dynamically customize an Adaptive Card, you can use slot Entity extracted from contact's message and saved for use in bot responses. Similar to a variable. variables . If you want to return data to your bot, you can include postback data in the configurations of an element such as a button. For example, this allows you to return the intent associated with the contact's choice back to the bot.

Customize Adaptive Cards with Slot Variables

You can include slot variables in your Adaptive Cards. This allows you to display the entity A piece of information gathered from the contact's messages during conversations with a bot. associated with the slot Entity extracted from contact's message and saved for use in bot responses. Similar to a variable. on the card when the card is sent to a contact.

A slot variable is constructed using the name of the entity associated with the slot enclosed in curly brackets. For example, {phone_number}. You can use slot variables in the properties of an element in the Adaptive Card designer. You can also locate the element in the Card Payload Editor section of the Adaptive Card designer and add the slot variable to the element. For example, "text": "Phone Number: {phone_number}".

Interactive Buttons

You can include interactive buttons in your Adaptive Card. You can add them to any element with an Actions section in its properties. There are several types of buttons in the Adaptive Card designer that you can use. The following button types are particularly helpful with Bot Builder:

• URL button: The button opens a URL. The JSON for this type of button looks like the following example:

  {
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://www.nice.com"
  }

• Postback button: The button sends postback data to the bot when the customer clicks or taps the button. You can use this to send an intent The meaning or purpose behind what a contact says/types; what the contact wants to communicate or accomplish back to the bot. The JSON for this type of button looks like the following example:

  {
   "type": "Action.Submit",
   "title": "Connect with agent",
   "data": {
  	"text": "/[intentName]"
   }

Create an Adaptive Card

New Adaptive Cards start with an example set of elements by default. You can modify the example elements or delete them all to start building a card from scratch.

After you create an Adaptive Card, you can use it in a bot response.

1. In CXone, click the app selector and select Others > Bot Builder.
2. Click the bot you want to work with.
3. Click Preferences > Adaptive Cards.
4. To create a folder, click the plus sign and enter a name, then press Enter.
5. In the folder you want to add an Adaptive Card to, click the plus sign .
6. Enter a name for the card and press Enter.
7. Add elements to your card: 
   • Double-click an option under Card Elements to add it to.
   • Drag and drop an element from the Card Elements section into the card preview.
   • Click an element's compass in the card preview and drag the element to a new location.
8. Configure your element's properties:
   •  Select an element in the preview or in the Card Structure section. The Element Properties section displays the selected element's properties. Modify them as needed. Each element has a different set of properties.
   • Use the Card Payload Editor to view, configure, or modify the properties of an element.
   • Click the X in the upper right corner of the preview to delete an element.
9. Use a slot in an element by entering the entity name in an element property field. Enclose the name in curly brackets. For example, {phone_number}.
10. To add an interactive button to the card, configure an action in your card as follows: 
    • Open a URL: Select Action.OpenURL as the Action type and enter the URL.
    • Send postback data: Select Action.Submit as the Action type and enter the intent name in the Data field using the format {"text":"/[intentName]"}.
11. To test the appearance of your card in the preview section, replace the default data in the Sample Data Editor section with example data for your card.
12. Changes are saved automatically.