If you’re developing a custom Copilot AI in Microsoft Copilot Studio and want to send dynamic, interactive messages, Adaptive Cards are the perfect solution. Adaptive Cards allow you to display rich content like images, text, buttons, and variables, improving user interaction and engagement. In this guide, we’ll walk you through the setup process, including how to integrate Adaptive Cards into your bot and utilize their features for a seamless user experience.
Understanding Adaptive Cards in Copilot Studio
Adaptive Cards in Copilot Studio are customizable, interactive messages that allow you to display rich, structured data such as images, text, buttons, and more. These cards are designed to adapt to different screen sizes and can be rendered across various platforms, making them ideal for creating visually appealing interactions. However, it’s important to note that as of now, Copilot Studio only supports Adaptive Card version 1.3, so be sure to set this in your settings to ensure compatibility.
Step-by-Step Guide: Setting Up Adaptive Cards
1. Create a Message Node
To begin, navigate to the conversation flow and select the message node where you want to send an Adaptive Card. From the top-left corner, click “Add” and choose “Adaptive Card” to insert it into your message. You can either keep the existing message or delete it if you want the Adaptive Card to be the sole content sent.
2. Design Your Adaptive Card
After inserting the Adaptive Card, click on the card to open the JSON editor. You can either manually write your JSON or use the Adaptive Card Designer tool for a more visual approach. This tool helps you build and preview your card before adding it to your flow. Make sure to set the version to 1.3 to ensure compatibility with Copilot Studio’s current capabilities.
3. Incorporating Dynamic Data with Formulas
If you want to include dynamic content such as an order number or estimated wait time, you’ll need to switch from JSON to the formula editor. This allows you to insert variables from your flow directly into the Adaptive Card. Be cautious, though—once you switch to the formula editor, you won’t be able to revert back to the JSON editor without losing your changes.
4. Testing and Optimizing
Once your Adaptive Card is ready, simulate user interactions to ensure it displays correctly and pulls the dynamic data as expected. You can adjust your card based on the results, testing different scenarios to make sure your card adapts well to various inputs.
Why Use Adaptive Cards in Copilot Studio?
Adaptive Cards significantly improve user experience by allowing for dynamic, visually appealing messages that adapt to the user’s context. With features like buttons and interactive elements, Adaptive Cards enable a more engaging interaction flow. They also allow you to embed important variables directly into the card, making your communication more personalized and informative.
Pro Tips for Creating Effective Adaptive Cards
- Utilize Variables Smartly: Take advantage of the formula editor to embed real-time data such as order details or customer preferences within your Adaptive Card.
- Stay Within Version 1.3: Ensure that you’re using version 1.3 of Adaptive Cards to maintain compatibility with Copilot Studio.
- Test Different Scenarios: Before going live, simulate various user inputs to test how your Adaptive Card responds to ensure all variables populate correctly.
In Conclusion
By following this guide, you’ll be able to create more engaging, user-friendly experiences within Copilot Studio using Adaptive Cards. These cards are a powerful tool for enhancing your Copilot AI’s ability to communicate effectively with users.
Thanks for reading. Happy Developing!