Creating Interactive Experiences with Adaptive Cards in Copilot Studio

In today’s fast-paced digital world, engaging users with rich, interactive content is key to creating meaningful conversations. In Copilot Studio, Adaptive Cards provide an effective way to enrich conversations by embedding dynamic and visually appealing components directly into your chatbot interactions. Adaptive Cards allow you to include text, images, buttons, and more, giving you the flexibility to design personalized experiences for users.

What are Adaptive Cards?

Adaptive Cards are platform-agnostic cards that enable you to send interactive content, such as forms and submit buttons, to users within a conversation. These cards can collect input, present information, and trigger actions, enhancing user engagement. Adaptive Cards are built using JSON, making them highly customizable and easy to integrate into various apps and services.

With Copilot Studio’s Adaptive Card Node, you can send these cards during a conversation and store user responses for future interactions.

How to Use Adaptive Cards in Copilot Studio

Step 1: Add an Adaptive Card Node

To start using Adaptive Cards, select the “Add Node” (+) icon in Copilot Studio, then choose “Ask with Adaptive Card”.

Step 2: Customize the Card

After adding the node, you’ll need to configure the card:

1. Enter the JSON for your card in the editor.
2. Ensure your card contains at least one submit button to allow users to interact with it.
3. Preview your card in the editor to ensure it looks the way you intend.

Copilot Studio will automatically create output variables based on the inputs detected within the card, allowing you to capture and store user responses.

Step 3: Add Custom Behaviors

Other properties available in the Adaptive Card Node allow you to:

• Reprompt users if a valid submission is not received.
• Define a retry prompt to resend the card if necessary.
• Allow users to switch topics mid-conversation without losing the context.

Using Power Fx for Dynamic Cards

To make Adaptive Cards even more powerful, you can integrate Power Fx formulas to dynamically generate content within your cards. By referencing variables from your conversation, you can create cards that adapt to the context and user input. This allows for a more personalized experience.

For example, you can dynamically insert a user’s name or other variables directly into the card by referencing them in the JSON code.

JSON Example for a Simple Adaptive Card

Here’s an example of a basic Adaptive Card in JSON format, asking the user to enter their name:

{
  "$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": "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"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}

Dynamic Adaptive Cards with Power Fx

You can further enhance this by using Power Fx to dynamically populate fields based on the conversation. For example, if you want to display personalized messages using variables, you can update the card to include Power Fx formulas.

Here’s how you can convert static text into dynamic content:

{  
	"type": "TextBlock",
	"text": "Topic.Title",
	"weight": "Bolder",
	"size": "Medium",
	"wrap": true
}

With these simple steps, you can start using Adaptive Cards to make your conversations more interactive and engaging, while also gathering important user input.

Conclusion

Adaptive Cards in Copilot Studio give you the tools to build rich, interactive conversations that engage your users. From collecting input to displaying personalized messages, Adaptive Cards make it easy to create a dynamic user experience that keeps the conversation flowing.