Make Conversations Interactive with Adaptive Cards Copilot Studio

Introduction

In this article, we will explore how to enhance chatbot conversations to be more user-friendly and interactive using Copilot. Often, we need to present information in a way that makes more sense when formatted properly. While chatbots are typically question-answer-based agents, designing conversations to include stylistic elements can be challenging. However, this is achievable using adaptive cards. Adaptive cards allow you to present data in a visually appealing format, improving the overall user experience.

In this article, we will try to design a response from copilot studio like this.

Overview of adaptive cards

Adaptive Cards are a framework developed by Microsoft for creating rich, interactive, and visually appealing content in a standardized way. They are used to present information in a consistent and engaging format across different platforms and applications. The benefits of adaptive cards are cross-platform compatibility, JSON-based, interactive elements, responsive design, and ease of use.

Add adaptive cards

Click on the + button and select the option “Ask with adaptive card”.

It will add adaptive card and right-hand side you can see (...) three dots, click on that and select “Properties” options. It will open a pop to add JSON-based adaptive cards.

Create a JSON-based style.

I will take an example of my created Json, which you can use to create your own.

JSON Style

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": []
}

This is the default code that you will find in the adaptive card.

To add “Flight details” and “Flight Number”.

Code

{
  "type": "TextBlock",
  "text": "Flight Details",
  "weight": "Bolder",
  "size": "Medium",
  "wrap": true,
  "style": "heading"
},
{
  "type": "TextBlock",
  "text": "Flight Number:",
  "weight": "Bolder",
  "wrap": true
}

To add the flight number, you can add Json.

JSON code

{
  "type": "TextBlock",
  "id": "flightNumber",
  "text": Topic.FlightNumber,
  "wrap": true
}

To add from location and to location and airplane icon, you can use Json like this.

JSON code

{
  "type": "ColumnSet",
  "columns": [
    {
      "type": "Column",
      "width": "stretch",
      "items": [
        {
          "type": "TextBlock",
          "text": "From:",
          "weight": "Bolder",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "id": "fromLocation",
          "text": Text(Topic.varFromLocation),
          "wrap": true
        }
      ]
    },
    {
      "type": "Column",
      "width": "auto",
      "items": [
        {
          "type": "Image",
          "url": "https://adaptivecards.io/content/airplane.png",
          "size": "Small",
          "altText": "Airplane Icon"
        }
      ]
    },
    {
      "type": "Column",
      "width": "stretch",
      "items": [
        {
          "type": "TextBlock",
          "text": "To:",
          "weight": "Bolder",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "id": "toLocation",
          "text": Text(Topic.varToLocaton),
          "wrap": true
        }
      ]
    }
  ]
}

To add the question - “Do you want to book this flight?”

At the end, you can add buttons like using Json code and remember this block will be after the body.

Complete the code you will have with the blog for download.

Conclusion

In this article, we learned how to design elements in an adaptive card using JSON elements. I took examples of how to show available flight details using adaptive cards and explained every and every element. I also shared code blocks to help you design your own adaptive card.