Adaptive Cards are like little info boxes you can add to bots in Microsoft Copilot Studio. These cards can also be shared with other apps and services. You make them using a special code called JSON. With Adaptive Cards, you can put in text, pictures, and buttons to make your bot conversations more interesting. They work on different platforms, so you can customize them easily.
You can create Adaptive Cards using a special Adaptive Card Designer tool or by writing the code directly. When you use an Adaptive Card in Copilot Studio, it can have buttons for users to click and fields where they can type something. Copilot Studio saves what users type so you can use it later in the conversation.
There is a setting in Copilot Studio where you can decide what happens if a user types something wrong or if the conversation gets interrupted. The Adaptive Card is mainly used for cards where users need to interact, unlike regular messages or questions where users just read the info.
Before using this feature, it is important to be familiar with Creating and Editing topics in Copilot.
To add an Adaptive Card node, first, click on the “Add node (+)” button. Then, choose “Ask with Adaptive Card.”
Next, you can expand the properties pane for the node by selecting the card icon or by clicking on the Node Menu (…) and selecting Properties.
In the Edit JSON section, you can enter the JSON code for your card. To view the JSON editor in a larger format, click on the Expand icon.
Additionally, you can easily edit Adaptive Cards by clicking on the provided link to access the Adaptive Card designer. This tool lets you visually design and customize your card to your liking. Once done, just copy the generated JSON code from the designer and paste it into Microsoft Copilot Studio. This makes it simple to create and modify your cards according to your needs.
Note: Ensure that your card includes at least one submit button. This is necessary for the card to be interactive, allowing users to submit information back to the bot. If your card is intended solely to display information to the user without requiring interaction, you should add the card as an attachment to a Message node instead.
In this blog, I’ll demonstrate using an example of a trip booking service. We’ll use an Adaptive Card to collect user contact details, which will help facilitate reaching out to users for providing additional information about the trip and the booking process.
Once you’ve added the JSON code for your card to the editor, just click outside of the editor. The node will then update with a preview of your card. Microsoft Copilot Studio will generate output variables automatically, relying on the detected inputs within the card.
If the output variables generated for your card are incorrect, you can manually update the list of variables and their types. To do this, select the “Edit Schema” button underneath the JSON editor in the property pane.
For example, you can define four string (Text) variables as shown below.
Here’s an example of JSON code for an Adaptive Card:
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json","type": "AdaptiveCard", "version": "1.5", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": 2, "items": [ { "type": "TextBlock", "text": "Tell us about yourself", "weight": "Bolder", "size": "Medium", "wrap": true, "style": "heading" }, { "type": "TextBlock", "text": "We just need a few more details to get you booked for the trip of a lifetime!", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "Don't worry we never sell or share your information.", "isSubtle": true, "wrap": true }, { "type": "Input.Text", "id": "myName", "label": "Your name (Last, First)", "isRequired": true, "regex": "^[A-Z][a-z]+, [A-Z][a-z]+$", "errorMessage": "Please enter your name in the specified format" }, { "type": "Input.Text", "id": "myEmail", "label": "Email", "isRequired": true, "errorMessage": "Please enter a valid email address" }, { "type": "Input.Text", "id": "myPhoneNumber", "label": "Phone Number", "isRequired": true, "errorMessage": "Please enter a valid phone number" } ] } ] } ], "actions": [ { "type": "Action.Submit", "title": "Submit" } ] }
Make your cards interactive with PowerFx! Just reference variables from your topic or bot to include dynamic information.
To do this, follow these steps:
Here’s how the resulting PowerFx script would look:
{ '$schema': "http://adaptivecards.io/schemas/adaptive-card.json", type: "AdaptiveCard", version: "1.5", body: [ { type: "ColumnSet", columns: [ { type: "Column", width: "2", items: [ { type: "TextBlock", text: "Tell us about yourself", weight: "Bolder", size: "Medium", wrap: true, style: "heading" }, { type: "TextBlock", text: "We just need a few more details to get you booked for the trip of a lifetime!", isSubtle: true, wrap: true }, { type: "TextBlock", text: "Don't worry we never sell or share your information.", isSubtle: true, wrap: true }, { type: "Input.Text", id: "myName", label: "Your name (Last, First)", isRequired: true, regex: "^[A-Z][a-z]+, [A-Z][a-z]+$", errorMessage: "Please enter your name in the specified format" }, { type: "Input.Text", id: "myEmail", label: "Email", isRequired: true, errorMessage: "Please enter a valid email address" }, { type: "Input.Text", id: "myPhoneNumber", label: "Phone Number", isRequired: true, errorMessage: "Please enter a valid phone number" } ] } ] } ], actions: [ { type: "Action.Submit", title: "Submit" } ] }
Additional properties can be configured to customize the behavior of the Adaptive Card node. These properties allow you to control various aspects such as handling invalid responses and interruptibility of the node.
In the scenario where the bot expects a submission from an Adaptive Card, but the user sends a text message instead, this is considered an invalid response, provided it doesn’t trigger an interruption. The following properties dictate the bot’s behavior in such cases:
You can mark input fields as required and specify the format of data needed using Regular Expressions. If a user enters values that don’t match the specified format, you can provide appropriate error messages. This ensures that users provide the correct type of data, improving the accuracy and reliability of their inputs.
Adaptive Cards in Microsoft Copilot Studio offers a powerful way to enhance user interaction and engagement within your bots. By incorporating dynamic content, such as input fields and buttons, Adaptive Cards allow for more personalized and interactive conversations. Additionally, the ability to handle invalid responses and seamlessly switch between topics ensures a smoother user experience. With Adaptive Cards, bot creators can create more intuitive and user-friendly experiences, ultimately leading to higher satisfaction and effectiveness in achieving bot objectives.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.