Post
Ask Question

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.

Copilot studio

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”.

Add adaptive

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.

JSON based

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”.

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

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.

Location and airplane icon

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?”

Add question

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

Json code

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.


Similar Articles