Adaptive Cards

Posted on Posted in Main

Microsoft recently announced Adaptive Cards here. It solves a problem that many bot developers have been facing. Given all the platforms: SMS, Facebook, Skype, Slack, etc…how do you create an experience that looks native, but doesn’t require you to recreate the same UI for each channel?

This is where adaptive cards come in. It is a format you can create your ‘cards’ in that will automatically adapt to specific the platform. For example, imagine you are a retailer and you want to show a menu to the user. Create it in the Adaptive Cards schema like this:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "0.5",
"body": [
{
"speak": "Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"size": 2,
"items": [
{
"type": "TextBlock",
"text": "Tom's Pie",
"weight": "bolder",
"size": "extraLarge"
},
{
"type": "TextBlock",
"text": "9.3 · $$ · Pizza",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "The BEST artisan pizza in Seattle!",
"wrap": true
}
]
},
{
"type": "Column",
"size": 1,
"items": [
{
"type": "Image",
"url": "http://res.cloudinary.com/sagacity/image/upload/c_crop,h_670,w_635,x_0,y_0/c_scale,w_640/v1397425743/Untitled-4_lviznp.jpg",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "More Info",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
]
}

Take a look at this video to get an overview of this awesome new feature: