See Also: QnA Ability

What are Adaptive Cards?  Adaptive Cards add a greater level of rich display and interactivity to a bot's User Interface (UI). Watch this video for an overview. 

What are the capabilities?  

  • Rich text formatting. 
  • Displaying images.
  • Linking to external resources. 
  • Buttons to link to content, or to direct a conversation.

Which ability can I use them with?  Adaptive Cards work best with the QnA Ability.

What do I need?  In order to use and implement Adaptive Cards, you will need the following:

Visual Examples: Here are some example LiveTiles Bots we created to help widen your view of what Adaptive Cards are capable of. Instead of having strictly text-driven responses, Adaptive Cards allow for more flexibility and advanced features in terms of user-bot interaction. 

How do I add Adaptive Cards to QnA Maker?
Follow these steps once you have an understanding of JSON code and Markdown rich text formatting:

With the LiveTiles QnA Editor:

  1. Create your Knowledge base (KB) in Microsoft's QnA Maker.
  2. Open your Knowledge base in the LiveTiles QnA Editor. 
  3. Enter your Adaptive Card JSON code:
    · Drag and drop a pre-made Adaptive Card template from the Adaptive Card Templates panel into the New Answer field.
    · Copy your Adaptive Card code from an IDE into the New Answer field of the QnA Editor. 

Without the LiveTiles QnA Editor:

  1. Create your Knowledge base (KB) in Microsoft's QnA Maker.
  2. Remove any extra spaces and special characters from your JSON code. This is called minification. You can use this online tool to minify your JSON. 
  3. Validate your JSON using this online tool.
  4. Copy and Paste your minified JSON into your QnA Maker KB. 

5. Click Save and train. Once that's finished, click Publish.
6. After linking your updated KB to LiveTiles Bots, you should now be able to see and test your Adaptive Cards. Click here to see how you can link your KB to LiveTiles Bots.

You are ready to try out the Adaptive Cards!

Best Practices: 

  • Keep the number of Actions to a minimum (around 3 or 4). Consider using the ShowCard action for nesting Cards with further Actions.
  • Keep the 'title' string under 30 characters long. Longer titles may be cut off on smaller devices.
  • When linking to a mailto (email) or tel (phone call) URL, try to put the address in the 'title' field rather than obscuring the end point of that action. (e.g. '1800 123 456' rather than 'Call Us'.) Ignore this rule if the address is too long.
  • For ShowCard or OpenUrl buttons/actions, write the 'title' in concise 'Title-like' strings. (e.g. 'Open Website' rather than 'Open the website.')
  • For Submit buttons/actions, write the both the 'title' and 'data' in concise natural language. (e.g. 'Show more options.' rather than 'Show More Options'.) While it's possible to use separate strings between what is displayed on the button (the 'title') rather than what is submitted (the 'data'), keep these identical whenever possible to maintain consistency and user expectations.
  • Use apostrophes (‘ ‘) for in-text quotes rather than full quotation marks (“ “).
Did this answer your question?