Designing User Interfaces (UI) in Copilot Studio: A Comprehensive Guide

Microsoft Copilot Studio (formerly Power Virtual Agents) is a no-code/low-code chatbot development platform that allows businesses to create AI-powered conversational bots. While chatbots are inherently text-based, designing an effective User Interface (UI) in Copilot Studio ensures a better user experience (UX) by making conversations engaging, structured, and interactive.

This guide provides a fully detailed step-by-step process on how to design an effective UI/UX for chatbots in Copilot Studio, including:
✅ Customizing Chatbot Responses
✅ Using Rich Cards & Adaptive Cards
✅ Adding Buttons, Quick Replies & Menus
✅ Styling the Chat Window
✅ Integrating UI with Power Automate
✅ Deploying & Testing the UI

📌 Step 1: Accessing Copilot Studio

Before designing the UI, you need access to Copilot Studio.

1.1 Sign In to Microsoft Copilot Studio

1️⃣ Open a web browser and visit https://copilotstudio.microsoft.com/.
2️⃣ Click “Sign In” and enter your Microsoft 365 credentials.
3️⃣ Once logged in, you’ll be redirected to the Copilot Studio Dashboard.

🔹 Step 2: Understanding UI Elements in Copilot Studio

Microsoft Copilot Studio allows you to enhance UI/UX by using visual elements instead of plain text-based interactions.

✅ UI Elements You Can Use in Copilot Studio

UI Element	Description	Use Case
Text Responses	Standard text-based replies	General chatbot responses
Quick Replies	Button-based responses	FAQs, simple choices
Hero Cards	Image, text & buttons	Product promotions, announcements
Adaptive Cards	Advanced UI elements	Forms, dynamic responses
Carousels	Scrollable sets of cards	Multiple product suggestions
Buttons	Clickable actions	Booking, confirming choices
Rich Media (Images, Videos, GIFs)	Visual content	Enhancing chatbot engagement

By combining these UI elements, you can make your chatbot more interactive and visually appealing.

🔹 Step 3: Customizing Chatbot Responses

The first step in UI design is improving the chatbot’s text-based responses by making them clear, concise, and engaging.

3.1 Editing Chatbot Messages

1️⃣ Navigate to Copilot Studio → Topics.
2️⃣ Select a topic (e.g., “Greeting”).
3️⃣ Click on the bot message and edit the text:

❌ Bad Example: "Hello, how can I help?"
✅ Good Example: "👋 Hi there! Welcome to our support bot. How can I assist you today?"
4️⃣ Click Save.

💡 Pro Tip:

Use emojis (🔥, ✅, 📌) to make responses more engaging.
Keep messages short and structured to improve readability.

🔹 Step 4: Adding Quick Replies (Button UI)

Instead of making users type everything, add Quick Replies to streamline conversations.

4.1 Creating Quick Reply Buttons

1️⃣ Click “Add Node” → “Message”.
2️⃣ Enter the bot response:

“What would you like help with?”
3️⃣ Click “Add Suggested Replies”, then enter:

🔹 “Product Information”
🔹 “Support Request”
🔹 “Talk to an Agent”
4️⃣ Click Save.

✅ Now, users can click buttons instead of typing!

🔹 Step 5: Using Rich Cards for Better UI

Rich Cards provide a more structured and visual layout with images, buttons, and text.

5.1 Adding Hero Cards (Image + Text + Buttons)

1️⃣ Click “Add Node” → “Show a Hero Card”.
2️⃣ Upload an image (e.g., product image).
3️⃣ Enter a title (e.g., “Latest Product”).
4️⃣ Add description text.
5️⃣ Click “Add Button”, enter:

Label: “View More”
Action: Open URL (e.g., product webpage).
6️⃣ Click Save.

✅ Now, users get a clickable image-based UI!

🔹 Step 6: Using Adaptive Cards (Advanced UI Design)

Adaptive Cards allow you to create dynamic forms and layouts inside chatbots.

6.1 Adding an Adaptive Card

1️⃣ Click “Add Node” → “Show an Adaptive Card”.
2️⃣ Copy & Paste this sample JSON:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "📅 Book an Appointment",
      "weight": "Bolder",
      "size": "Medium"
    },
    {
      "type": "Input.Text",
      "id": "UserName",
      "placeholder": "Enter your name"
    },
    {
      "type": "Input.Date",
      "id": "AppointmentDate",
      "placeholder": "Select a date"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Confirm Booking"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.3"
}

3️⃣ Click Save.

✅ Now, users can enter their name and select a date directly in the chatbot!

🔹 Step 7: Styling the Chat Window (Custom Branding)

Copilot Studio allows some custom branding when embedding chatbots on websites.

7.1 Customizing Chat Widget Appearance

1️⃣ Go to “Channels” → “Custom Website”.
2️⃣ Click “Customize Appearance”.
3️⃣ Change:

✅ Chat Window Color
✅ Bot Avatar & Name
✅ Font & Text Colors
4️⃣ Click Save & Publish.

✅ Now, your chatbot matches your company branding!

🔹 Step 8: Testing the UI Design

Before deployment, test the UI to ensure everything looks and works as expected.

8.1 Running a UI Test

1️⃣ Click “Test Bot” (top-right corner).
2️⃣ Try different responses (buttons, images, Adaptive Cards).
3️⃣ Verify formatting and design consistency.
4️⃣ Adjust UI elements if needed.

🔹 Step 9: Deploying the Chatbot UI

Once satisfied with the UI, deploy your chatbot on different platforms.

9.1 Deploying to Microsoft Teams

1️⃣ Go to “Channels” → “Microsoft Teams”.
2️⃣ Click “Enable” and follow setup instructions.

9.2 Embedding on a Website

1️⃣ Go to “Channels” → “Custom Website”.
2️⃣ Copy the embed code (iframe).
3️⃣ Paste it into your website’s HTML code.

✅ Your chatbot UI is now LIVE!

Designing user interfaces (UI) in Copilot Studio