Microsoft Power Pages for the Metaverse

Embed your Metaverse in a Microsoft Power Pages portal

Enhancements

Increase the page real estate for the metaverse experience using Page builder

Allow more interaction features through Visual Studio Code

Embed Microsoft Power Pages inside your Metaverse

Embed your Metaverse in a Microsoft Power Pages portal

Try an example here

Add a new Page

  1. Enter a name for the Page eg. Metaverse
  2. Choose the Start from blank layout
  3. Click Add

  1. Choose the More… component
  2. Select iFrame

  1. Paste the world or space URL from the Hyperspace Dashboard
  2. Click OK

  1. Click the Preview button
  2. Choose Desktop preview

Experience your metaverse inside Power Pages

Enhancements

Increase the page real estate for the metaverse experience using Page builder

  1. Choose the Section (the parent element of the iFrame)
  2. Click the settings icon
  3. Set the Column margin to 0
  4. Set the Column padding to 0
  5. Click OK

Allow more interaction features through Visual Studio Code

  1. Click Edit code
  2. Click Open Visual Studio Code

<iframe src="https://app.learnbrite.com/dashboard/worlds/wrla9871d167dd580006ac441" allow="xr-spatial-tracking; display-capture; magnetometer; picture-in-picture; wake-lock; screen-wake-lock; vr; geolocation; microphone; camera; midi; encrypted-media; autoplay; fullscreen; gyroscope; accelerometer;" id="learnbriteSpaceFrame" width="300" height="150" frameborder="0" scrolling="no" style="overflow: hidden; border: 0; position: absolute; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 100;"></iframe>

Find the line that contains the iframe code, you may need to scroll far right

Copy the allow parameter and paste it into the the iframe element

Embed Microsoft Power Pages inside your Metaverse

Another useful way to use Microsoft Power Pages is to make them available inside your metaverse experience.

By default Power Pages do not allow embedding. This can be changed by following this guide https://learn.microsoft.com/en-us/power-apps/maker/portals/embed-portal-website

https://learn.microsoft.com/en-us/power-apps/maker/portals/configure/cors-support

  1. Go to Apps
  2. Find the Power Pages site and click the triple dot icon
  3. Choose Settings from the menu

Choose Site Settings from the right hand panel

Content-Security-Policy: frame-ancestors https://app.hyperspace.mv https://app.mootup.com https://app.learnbrite.com;

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?