Embed Canvas Apps to PowerApps Portal

As you know, day-by-day PowerApps is becoming more and more powerful, and it can be easily embedded into any website. This blog will explain how you can embed Canvas PowerApps to PowerApps Portal.

Follow Below steps to achieve this:

Steps to get the App Id of Canvas App:

Go to Apps -> Select the Canvas App -> Click on more commands “…” -> Select Details

You will get App ID in Details
- Copy this App ID

Steps for embedding Canvas App in PowerApps Portal

I will explain two ways to embed canvas apps

Method 1:

Code to Embed the Canvas app

Code: <iframe width=”[W]” height=”[H]” src=”https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)” allow=”geolocation; microphone; camera”/>

[W]: width of Iframe

[H]: height of Iframe

[AppID]: id of canvas App

Select the webpage (page) on which you want to embed the canvas app.

Go to “Source Code Editor” of the Webpage(page)

Enter the Code here,

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
    <iframe frameborder="0" width="700" height="500" src="https://apps.powerapps.com/play/b74d3c24-940e-4bbc-8541-db9d8f8e87ec?source=website&amp;screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera">
      </iframe>
</div>
  </div>
</div>

Save the code.
Once you save the code browse the website you will see the canvas app

Method 2:

Select the webpage (page) on which you want to add the canvas app.

Go to Components -> Select Iframe

After Adding Iframe update the properties of Iframe.

Width: width of Iframe

Height: height of Iframe

Link: https://apps.powerapps.com/play/[AppID]?source=website

Example: https://apps.powerapps.com/play/b74d3c24-940e-4bbc-8541-db9d8f8e87ec?source=website

AppID is the Id of canvas App.

After Adding Link, you will see Canvas app

NOTES:

Currently, only Active Directory Users can see or use the Canvas App from PowerApps portal
Anonymous users will not be able to access the Canvas App they will see below screen.

Portal Securities like Web Roles, Entity Permissions are not applicable to the canvas app