How to Embed a Power Apps Code App in an Iframe (Step-by-Step Guide)

How to Embed a Power Apps Code App in an Iframe

Looking to surface your Power Apps code app inside a model-driven app web resource, a custom website, or any third-party service that supports iframes? You're in the right place. Embedding a code app via iframe unlocks powerful integration possibilities — letting you deliver rich, interactive experiences without forcing users to navigate away from their existing workflows.

In this step-by-step guide, we'll walk you through exactly how to embed a code app in an iframe, covering everything from prerequisites to configuration best practices. Whether you're a developer or a Power Platform enthusiast, this guide has you covered.

What Is a Power Apps Code App?

A code app in Power Apps is a developer-focused application type that gives you full control over your app's behavior using code — as opposed to the low-code canvas approach. Code apps are ideal when you need custom UI components, complex logic, or seamless integration with external systems.

For more on what Power Apps and the Power Platform can do for your business, visit our Power Platform Development page.

Prerequisites

Before embedding your code app in an iframe, make sure you have the following in place:

Step 1: Retrieve Your Code App URL

To embed your code app, you first need its unique URL. Here's how to find it:

  1. Sign in to Power Apps.
  2. Navigate to Apps in the left-hand navigation.
  3. Locate your code app and click the three-dot menu (...) next to it.
  4. Select Details and copy the Web link URL.

Keep this URL handy — you'll need it in the next step.

Step 2: Configure iframe Permissions

Because code apps enforce security policies, you must explicitly allow them to be embedded in an iframe. This involves configuring the Content Security Policy (CSP) settings within your Power Platform environment.

Allow iframe Embedding in Power Platform Admin Center

  1. Go to the Power Platform Admin Center.
  2. Select your Environment.
  3. Navigate to Settings > Privacy + Security.
  4. Under Content Security Policy, add your host domain to the allowed list of frame ancestors.
  5. Save your changes.

⚠️ Important: Failing to configure CSP settings correctly will result in the iframe being blocked by the browser. Always test in your target environment after making changes.

Step 3: Add the Iframe to Your Host

Once your app URL is ready and permissions are configured, you can embed the code app using a standard HTML <iframe> tag. Here's a basic example:

<iframe
  src="https://apps.powerapps.com/play/<your-app-id>?tenantId=<your-tenant-id>"
  width="100%"
  height="600px"
  frameborder="0"
  allow="microphone; camera; geolocation"
  allowfullscreen
></iframe>

Key Iframe Attributes Explained

Step 4: Embed in a Model-Driven App Web Resource

If your target host is a model-driven app, you can embed the code app as an HTML web resource:

  1. In your model-driven app, go to Settings > Customizations > Customize the System.
  2. Navigate to Web Resources and create a new HTML web resource.
  3. Paste your iframe code into the HTML file.
  4. Save and publish the web resource.
  5. Add the web resource to the desired form or page in your model-driven app.
  6. Save and publish the app.

Need help setting up or customising your model-driven app environment? Explore our Dynamics 365 Implementation Services for expert support.

Step 5: Test the Embedded App

After embedding, always thoroughly test your iframe integration:

Common Issues and Troubleshooting

The iframe Shows a Blank Page

This is most commonly caused by a Content Security Policy misconfiguration. Double-check that your host domain has been added to the frame ancestors list in the Power Platform Admin Center.

Users Are Prompted to Sign In Again

Ensure that your host and the Power Apps environment share the same Azure AD tenant, and that cross-origin cookies are permitted. Consider using seamless single sign-on (SSO) configurations where possible.

App Doesn't Resize Properly

Use percentage-based width values and set a fixed or viewport-relative height. You can also use JavaScript's postMessage API to dynamically resize the iframe based on the app's content height.

Best Practices for Iframe Embedding

Supercharge Your Power Platform Solutions

Embedding code apps in iframes is just one of the many powerful techniques available within the Microsoft Power Platform ecosystem. Whether you're building custom portals, integrating apps into existing business tools, or creating seamless user experiences, the Power Platform gives you the flexibility to do it all.

At CRMONCE, our team of certified Power Platform specialists can help you design, build, and deploy solutions that truly fit your business needs — from architecture planning to full implementation.

Ready to Build Something Powerful?

Whether you need help embedding Power Apps into your existing systems or want to explore what the Power Platform can do for your organisation, our experts are ready to help.

📩 Get in Touch with CRMONCE Today