Power Pages (formerly Power Apps Portals) allows you to build secure, low-code websites that interact with Microsoft Dataverse and other Microsoft 365 services. One of the most powerful ways to extend functionality is by embedding Power Apps directly into your Power Pages sites. This allows users to interact with business applications like forms, dashboards, and custom logic without leaving the portal.
This guide provides a deep-dive into embedding Power Apps into Power Pages, including best practices, security considerations, and step-by-step instructions.
Why Embed Power Apps in Power Pages?
Embedding Power Apps offers several advantages:
- Deliver advanced user interactions (e.g., canvas apps) inside the portal
- Reuse internal business apps for external audiences
- Reduce duplication of development
- Keep the experience consistent and branded
- Leverage Power Apps features such as offline support, responsive UI, and more
What Types of Power Apps Can Be Embedded?
You can embed:
- Canvas Apps – built for flexibility and visual control
- Model-Driven Apps – primarily for internal users (not ideal for anonymous access)
Canvas apps are preferred for embedding into Power Pages.
Embedding Power Apps in Power Pages – Step-by-Step
Step 1: Create or Identify Your Power App
- Go to Power Apps Studio
- Open an existing Canvas App or create a new one
- Publish and Save it
Make sure the app is shared with the users who will access the Power Pages portal.
Step 2: Get the Embed URL of the Power App
- In Power Apps Studio:
- Click on your App > Details
- Copy the Web link (it ends with something like
/apps/<AppID>)
- Modify the URL to embed:
https://apps.powerapps.com/play/{AppID}?source=portal
You can also use the iframe-ready embed version:
<iframe src="https://apps.powerapps.com/play/{AppID}?source=iframe"
width="100%"
height="600px"
frameborder="0"
allow="fullscreen">
</iframe>
Step 3: Embed in Power Pages Using HTML or Web Template
Go to your Power Pages site:
Option 1: Using Web Page Content Editor
- Navigate to the Web Page
- Edit using HTML view
- Paste the
<iframe>code
<div class="embedded-app">
<iframe src="https://apps.powerapps.com/play/e/xxxxx" width="100%" height="650" frameborder="0"></iframe>
</div>
Option 2: Using Web Template
If your site uses a Web Template:
- Open Web Templates in Power Pages Management
- Embed the iframe where needed inside your layout or content block
Step 4: Ensure User Permissions and Access
- The Power App must be shared with all portal users (internal/external as needed)
- Use Azure AD B2C or other identity providers for external access
- Use Dataverse security roles or table permissions to restrict data visibility
If the app uses Dataverse, ensure that anonymous or B2C users have proper permissions on tables.
Advanced Customizations
Embedding Responsive Canvas Apps
- Design your Canvas App to be fully responsive (use containers, relative sizing)
- Adjust the iframe height dynamically using JS, if needed
Passing Parameters to Power Apps
You can pass values via the query string:
<iframe src="https://apps.powerapps.com/play/e/xxx?tenantId=...&source=portal&UserID=12345"
width="100%" height="650">
</iframe>
Then inside the Canvas App:
- Use
Param("UserID")to retrieve values
Security and Licensing Considerations
Security
- Never expose sensitive data in query strings
- Ensure your Power App and data sources are secured with proper roles
- Use Power Pages table permissions and Power App role-based views
Licensing
To embed and access Power Apps in Power Pages:
- Users must be licensed appropriately (Power Pages authenticated user license or external license)
- Shared access to the app is not the same as giving external access via portal
- For external users, Power Pages authenticated access licensing applies
Troubleshooting Common Issues
| Issue | Solution |
|---|---|
| Power App doesn’t load | Check app sharing, environment access |
| App loads blank | Ensure it’s published and the iframe src is correct |
| Access denied | Share the app with the user, check identity provider |
| App doesn’t resize | Use responsive layout in Power Apps |
Best Practices
- Always design embedded Power Apps to be minimal and lightweight
- Use one Power App per portal section to avoid slow load
- Test across mobile and desktop browsers
- Avoid embedding apps that require complex navigation
- Log usage with Power Platform Admin Center