Integrating UI Components from Other Platforms in Copilot Studio

Copilot Studio allows you to integrate UI components from other platforms, such as Power Apps, Adaptive Cards, Web APIs, Microsoft Teams, and third-party UI libraries, to create rich, interactive, and customized chatbot interfaces. This guide will take you through a detailed step-by-step process on how to seamlessly integrate external UI elements into Copilot Studio.

Step 1: Understanding UI Component Integration in Copilot Studio

1. Why Integrate External UI Components?

✅ Enhance chatbot interactivity by adding forms, buttons, tables, and dynamic elements.
✅ Connect with third-party services such as Power Apps, external APIs, and dashboards.
✅ Improve user experience (UX) by making conversations more engaging and visually structured.
✅ Support cross-platform interactions by embedding UI elements from Teams, SharePoint, or web-based applications.

2. Supported UI Components for Integration

UI Component	Integration Method	Use Case
Adaptive Cards	JSON-based UI inside Copilot Studio	Display structured content like forms, buttons, images
Power Apps Embeds	Power Automate or iframe embedding	Embed complex apps for user input
Microsoft Teams UI	Bot Framework, Teams SDK	Send Teams-friendly interactive elements
Web-Based UI	External API calls, iframe embedding	Display external dashboards, reports
Custom API Components	API responses formatted in Adaptive Cards	Fetch dynamic data from external sources

Step 2: Integrating Adaptive Cards for Custom UI

1. What Are Adaptive Cards?

Adaptive Cards are JSON-based UI components that can be used within Copilot Studio to display structured content such as:

Forms
Buttons
Images
Dynamic text

2. Steps to Integrate an Adaptive Card

✅ Step 1: Create an Adaptive Card
Use the Adaptive Cards Designer to create the UI structure.

✅ Step 2: Copy the JSON Code
Once designed, copy the JSON code of your Adaptive Card.

✅ Step 3: Add to Copilot Studio
In Copilot Studio, go to:
📌 Bot Editor > Add Node > Send an Adaptive Card

✅ Step 4: Paste JSON Code
Paste the JSON code inside the Adaptive Card node.

✅ Step 5: Test the Card in Web Chat or Microsoft Teams
Ensure buttons, input fields, and responses work correctly.

Example Adaptive Card JSON for UI Integration

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "📋 Enter Your Details",
      "weight": "Bolder",
      "size": "Medium"
    },
    {
      "type": "Input.Text",
      "id": "name",
      "placeholder": "Enter your name"
    },
    {
      "type": "Input.Text",
      "id": "email",
      "placeholder": "Enter your email"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

✅ Best Practices for Adaptive Cards
✔ Keep the design clean and simple for readability.
✔ Use buttons instead of long text inputs where possible.
✔ Test across different platforms (Teams, Web, Mobile).

Step 3: Embedding Power Apps UI Components

1. Why Use Power Apps in Copilot Studio?

Allows you to embed forms, dashboards, and interactive elements.
Supports Power Automate workflows to send data from Copilot to Power Apps.
Enhances chatbot capabilities by integrating dynamic content.

2. How to Embed Power Apps in Copilot Studio?

✅ Step 1: Get the Power Apps Embed Code

Open Power Apps and go to the desired app.
Click Settings > Embed App.
Copy the iframe code or App ID.

✅ Step 2: Add the Embed Code in Copilot Studio

In Copilot Studio, insert a message node.
Use the iframe link inside a web message.

Example Embed Code for Power Apps in Web Chat

<iframe width="600" height="400" src="https://apps.powerapps.com/play/APP_ID"></iframe>

✅ Step 3: Automate Data Transfer Between Power Apps & Copilot Studio

Use Power Automate to send data from the chatbot to Power Apps.
Automate form submissions, approvals, and data lookups.

✅ Step 4: Test in Microsoft Teams & Web Chat

Ensure the Power App loads correctly inside the chatbot window.
Check if users can submit data without errors.

Step 4: Integrating Microsoft Teams UI Components

1. Why Use Microsoft Teams UI Elements?

Enhances chatbot experience for Teams users.
Allows users to interact with Teams-specific UI components.
Supports Adaptive Cards, mentions, and deep links.

2. How to Add Teams-Specific UI Elements?

✅ Step 1: Use Adaptive Cards with Teams Styling
Modify Adaptive Cards to use Teams buttons, images, and rich text.

✅ Step 2: Use the Teams Bot Framework SDK

Enable Teams compatibility in Copilot Studio.
Add deep links to Teams channels from the bot.

✅ Step 3: Use Teams Mentions & Deep Links

{
  "type": "Message",
  "text": "<at>John Doe</at> Please review the request.",
  "mentions": [
    {
      "id": "john.doe@company.com",
      "mentionText": "<at>John Doe</at>"
    }
  ]
}

✅ Step 4: Test in a Microsoft Teams Channel

Ensure messages and mentions work properly.
Verify that links open the correct Teams resources.

Step 5: Integrating Web-Based UI Components

1. Why Use Web-Based UI Components?

Allows chatbots to display external dashboards, reports, and tools.
Connects chatbots with live data from external systems.
Enhances interactivity using custom-built UI elements.

2. How to Embed Web UI Components in Copilot Studio?

✅ Step 1: Generate an iframe Embed Link

Identify the web app or dashboard to integrate.
Use iframe embedding to display it in Copilot Studio.

✅ Step 2: Add the Link in a Copilot Studio Message

<iframe src="https://example.com/dashboard" width="700" height="500"></iframe>

✅ Step 3: Test the Web Component Integration

Check if the dashboard loads correctly inside the chat window.
Verify that data updates dynamically when interacting with the chatbot.

Final Thoughts: Creating a Unified UI in Copilot Studio

✅ Key Takeaways:
✔ Use Adaptive Cards for structured UI components like forms & buttons.
✔ Embed Power Apps to integrate external data entry and workflows.
✔ Leverage Microsoft Teams UI elements for a seamless Teams experience.
✔ Use iframe embedding to integrate web-based UI dashboards.
✔ Test integrations across multiple platforms (Web, Teams, Mobile).

By following these steps, you can create a rich, interactive, and seamless UI experience in Copilot Studio using external components from different platforms.

Would you like custom UI templates or integration troubleshooting tips? Let me know!

Integrating UI components from other platforms