Powerapps embed into other Apps

Question

Can we embed the Powerapps url into React application? Is that achievable using Powerapps?

Used the below code, could see most of the embeded systems are with PowerBI, SharePoint forms

Imported the iframe module:

Import Iframe from 'react-iframe'; //npm install --save react-iframe 

  <Iframe url={"https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/AppID"}  
               width="1024px" height="550px"  
               position="relative"  
               allowFullScreen>  
           </Iframe>  

Facing issue

Answer 1

I embedded my PowerApps app in a html page like this: <iframe width="100%" height="640px" src="https://apps.powerapps.com/play/e/YOUR-LINK"></iframe> (pretty straight forward), the issue there was that the browser blockes 3rd party cookies by default. so I had to add an exception that cookies from [*].powerapps.com are allowed. Maybe this is a problem... maybe this solves your problem by trying to allow 3rd party cookies using sandbox="allow-same-origin"

import React from 'react';

const MyIframeComponent = () => {
  return (
    <div>
      <iframe
        title="PowerApps"
        width="100%"
        height="640px"
        frameBorder="0"
        src="https://apps.powerapps.com/play/e/default-a986a27a-dd4b-45d5-8c51-8a2a671b43bc/a/7a011732-bc99-4bb8-9336-a31ebd47dad7?tenantId=a986a27a-dd4b-45d5-8c51-8a2a671b43bc&SAPISIDHASH=YOUR_SAPISIDHASH"
        allowFullScreen
        sandbox="allow-same-origin"
      ></iframe>
    </div>
  );
};

export default MyIframeComponent;