Customizing UI Elements in Copilot Studio

Customizing UI elements in Copilot Studio allows you to create visually appealing, interactive, and user-friendly chat experiences. By using Adaptive Cards, Power Automate, and Copilot Studio’s built-in UI options, you can control how information is displayed and how users interact with the chatbot.

This guide provides a step-by-step breakdown of UI customization techniques, including text formatting, button styling, card layouts, interactive inputs, and branding adjustments.

Step 1: Understanding UI Customization Options in Copilot Studio

Before diving into customization, it’s essential to understand which UI elements can be modified:

UI Element	Customization Options
Text Messages	Font size, bold, italics, emojis, structured formatting
Buttons & Quick Replies	Custom labels, color indications, icons
Adaptive Cards	Layouts, images, columns, buttons, text inputs
Media (Images, Videos, GIFs)	Sizing, alignment, dynamic fetching
Branding & Themes	Logo, color scheme, fonts (limited in Copilot Studio)
User Input Fields	Dropdowns, text fields, date pickers, toggle buttons

Step 2: Enhancing Text Formatting & Message Styling

1. Formatting Text Messages in Copilot Studio

Plain text messages can be enhanced with formatting to improve readability:

Formatting Type	Example	Result
Bold Text	`Bold`	Bold
Italics	`_Italic_`	Italic
Bullet Points	`- Item 1` `- Item 2`	• Item 1 • Item 2
Numbered Lists	`1. Step One` `2. Step Two`	1. Step One 2. Step Two
Emojis	`🚀`	🚀

Example Message in Copilot Studio:

**Welcome to the Sales Bot!** 🚀  
Here’s what I can do for you:  
- Check order status ✅  
- Provide sales reports 📊  
- Connect you to an agent 🤝

✅ Best Practices:

Use bold for key information.
Use emojis to make messages engaging.
Keep messages short and scannable.

Step 3: Customizing Buttons & Quick Replies

1. Creating Quick Reply Buttons

Quick replies allow users to tap a button instead of typing responses manually.

Example Quick Reply Setup in Copilot Studio:

✅ Bot Message:

What would you like to do?

✅ Quick Reply Buttons:

[📦 Track Order]
[📊 View Reports]
[🔄 Restart Chat]

Benefits of Quick Replies:

✔ Saves time (faster interaction).
✔ Reduces errors (avoids manual input mistakes).
✔ Improves navigation (guides users easily).

Step 4: Designing Custom Adaptive Cards for UI Personalization

1. What Are Adaptive Cards?

Adaptive Cards allow you to structure and format chatbot responses dynamically using JSON.

2. Customizing Adaptive Card Layouts

Adaptive Cards can include:

Headers (bold, large text).
Columns (for side-by-side elements).
Images & Icons (for branding).
Buttons & Input Fields (for interaction).

Example JSON for a Custom Adaptive Card

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "📊 Sales Report Summary",
      "size": "Large",
      "weight": "Bolder",
      "color": "Accent"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "50%",
          "items": [
            {
              "type": "TextBlock",
              "text": "Total Revenue",
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "$1,200,000",
              "size": "ExtraLarge",
              "color": "Good"
            }
          ]
        },
        {
          "type": "Column",
          "width": "50%",
          "items": [
            {
              "type": "TextBlock",
              "text": "Pending Orders",
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "450",
              "size": "ExtraLarge",
              "color": "Attention"
            }
          ]
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "View Full Report",
          "data": {
            "action": "view_report"
          }
        }
      ]
    }
  ]
}

✅ Best Practices for Adaptive Cards:

Use ColumnSet for a responsive layout.
Use color properties to highlight key data.
Include buttons for actionable steps.

Step 5: Adding User Input Fields for Interactivity

1. Types of Input Fields You Can Use in Adaptive Cards

Input Type	Use Case
Text Field	Entering comments or feedback
Dropdown Menu	Selecting a product or category
Date Picker	Choosing an appointment date
Toggle Switch	Enabling/disabling settings

Example JSON for a User Input Form

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "📅 Schedule a Meeting",
      "size": "Medium",
      "weight": "Bolder"
    },
    {
      "type": "Input.Text",
      "id": "user_name",
      "placeholder": "Enter your name"
    },
    {
      "type": "Input.Date",
      "id": "meeting_date",
      "label": "Select a date"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Confirm",
          "data": {
            "action": "schedule_meeting"
          }
        }
      ]
    }
  ]
}

✅ Why Use Inputs in Adaptive Cards?
✔ Makes chatbots more interactive.
✔ Simplifies user data entry.
✔ Works across platforms (Teams, Web, Mobile).

Step 6: Customizing Branding & Themes

Since Copilot Studio has limited direct branding options, you can still customize branding by:

Adding logos in Adaptive Cards (via Image elements).
Using brand colors in text & button styles.
Embedding external UI (PowerApps, Power BI) for custom styling.

Example of Adding a Logo in an Adaptive Card

{
  "type": "Image",
  "url": "https://example.com/logo.png",
  "size": "Medium",
  "horizontalAlignment": "Center"
}

✅ Branding Best Practices:

Ensure logos/images are optimized for fast loading.
Maintain consistent colors & fonts for professional UI.

Step 7: Testing & Deploying Your Custom UI

1. Test Across Different Platforms

Microsoft Teams (check responsiveness).
Web Chat (ensure proper formatting).
Mobile View (ensure buttons are touch-friendly).

2. Collect User Feedback

Add a feedback option after interactions.
Use A/B testing to compare UI styles.

Final Thoughts: Crafting a Stunning UI in Copilot Studio

By following these customization techniques, you can create a visually appealing, user-friendly, and interactive chatbot UI that enhances engagement.

Key Takeaways:

✅ Use Adaptive Cards for structured layouts.
✅ Enhance UX with Quick Replies & Buttons.
✅ Make it interactive with Input Fields.
✅ Brand it with colors, logos & images.
✅ Test across devices before deployment.

Would you like a pre-built UI template for your chatbot? Let me know!

Customizing UI elements in Copilot Studio