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.


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.

um ok

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

Adaptive cards

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:

publisher adaptive cards

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.

  • 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

  • Writing “advanced” content

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 ! 


Ce que vous lisez à l'air de vous plaire...

Et si vous vous inscriviez à notre newsletter ?

Recevez ce type de contenu et bien d’autres (outils, actualités, témoignages, podcasts…) toutes les semaines directement dans la boîte mail de votre choix. Désinscrivez-vous à tout moment.