What are adaptive cards and why use them?
You can easily find the “official” definition on the internet. But in this article, Vizir’s CTO shares examples that will show you a range of possible uses.
-
Benoit Guivarc'h
- le 7 September 2022
1. What is an adaptive card?
The definition of Microsoft, publisher of the open source solution, is as follows:
“Adaptive Maps are platform-independent UI code snippets created using a lightweight JSON format that applications and services” can share.
So far, it doesn’t tell us much, I know.

Here are some examples of content managed by adaptive cards that will probably be more telling:

To redefine it with simpler words, adaptive map technology is a json writing standard that allowscontent to be displayed on different media:
- Website or mobile application
- Microsoft Teams application or MS Teams chatbot
- Outlook
2. Why use adaptive cards?
The easiest way to get an idea of the benefits of adaptive cards is to try the online adaptive card editor:
> Adaptive card editor <
You can create a new map and use existing templates:

In addition to the “design” aspect, which is simple and quick to implement, adaptive cards also allow you to :
- Validate the requested data format
- Email, numbers, regex: adaptive cards will allow you to retrieve reliable information.
- Email, numbers, regex: adaptive cards will allow you to retrieve reliable information.
- Display content dynamically
- You can directly use the templating language provided with adaptive cards to display dynamic content in your cards (name, first name, date, destination, …) You can find all the formatting possibilities on the documentation of adaptive cards: https: //docs.microsoft.com/fr-fr/adaptive-cards/templating/language
- You can directly use the templating language provided with adaptive cards to display dynamic content in your cards (name, first name, date, destination, …) You can find all the formatting possibilities on the documentation of adaptive cards: https: //docs.microsoft.com/fr-fr/adaptive-cards/templating/language
- Writing “advanced” content
- Do you want to have a unique card model to manage all possible cases of ticket creation in your company? This is possible with the built-in functions that will allow you (among other things) to use conditional writing, arithmetic operations, comparisons, and many other operations that can be seen once again in the online documentation: https://docs.microsoft.com/fr-FR/azure/bot-service/bot-builder-concept-adaptive-expressions?view=azure-bot-service-4.0

3. How are adaptive cards used in Vizir chatbots?
Since this summer (2022), you have the possibility to use adaptive cards directly in Vizir chatbots.
⚠️ For now adaptive cards only works on web chatbots (and widget) and MS Teams.
An upcoming article will list all of our pre-designed adaptive card templates that will allow you to connect your internal tools to your chatbot in minutes ⚡️.
🍔 Menu
Pour tout savoir sur les chatbots et l'IA, inscrivez-vous à la Newsletter
Partager l’info
En attendant, partagez cet article à vos collègues développeurs, ils vous diront merci !