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 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.
Click on + button and select 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.
This is default code which you will find in adaptive card.
To add “Flight details” and “Flight Number”
To add flight number, you can add Json like -
text: Topic.FlightNumber,
To add from location and to location and airplane icon you can use Json like this
text: Text(Topic.varFromLocation),
text: Text(Topic.varToLocaton),
To add 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 after body.
Complete code you will have with blog for download.
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.
