AdaptiveCards

Bot Builder supports using AdaptiveCards 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 support standard rich media elements, such as buttons and list pickers, and more. 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 . 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 AdaptiveCards available by default. You must design your own using the Microsoft AdaptiveCard designer, which is embedded in Bot Builder.

Using the AdaptiveCard designer, you can create AdaptiveCard templates to use with Bot Builder. When a bot executes a response that includes an AdaptiveCard 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..

AdaptiveCard Support by Channel

AdaptiveCards 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 AdaptiveCards 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 AdaptiveCardon channels that don't support them. You can configure rich messaging fallback for each bot response that uses AdaptiveCards.

AdaptiveCard Designer

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

You can use any available AdaptiveCard elements in the cards you develop. To dynamically customize an AdaptiveCard, 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 AdaptiveCards with Slot Variables

You can include slot variables in your AdaptiveCards. 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 AdaptiveCard designer. You can also locate the element in the Card Payload Editor section of the AdaptiveCard 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 AdaptiveCard. You can add them to any element with an Actions section in its properties. There are several types of buttons in the AdaptiveCard 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 AdaptiveCard

New AdaptiveCards 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 AdaptiveCard, 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 > AdaptiveCards.
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 AdaptiveCard 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.