Miro Whiteboard for the Metaverse

Miro is a whiteboard platform for collaborative work for distributed teams. It can be embedded inside metaverse experiences and conversely metaverse experiences can be pinned inside Miro boards for collaboration.

Embed a Miro board in the Metaverse

Embed a metaverse in a Miro board

Embed a Miro board in the Metaverse

See an example here https://app.learnbrite.com/dashboard/spaces/visit/spcff80a891312fd907d44b49 

Click the Share button

Click the Get embed code link

  1. Choose Free navigation to allow interactions with the board as a team. Choose presentation if you only wish to allow viewing.
  2. Click the Copy embed code button

Paste the embed code

<iframe width="768" height="432" src="https://miro.com/app/live-embed/o9J_leEmb8s=/?moveToViewport=-1382,-678,2414,1284&embedId=112668658277" frameborder="0" scrolling="no" allow="fullscreen; clipboard-read; clipboard-write" allowfullscreen></iframe>

Adjust the embed code as highlighted

<iframe width="100%" height="600" src="https://miro.com/app/live-embed/o9J_leEmb8s=/?moveToViewport=-1382,-678,2414,1284&embedId=112668658277&embedAutoplay=true" frameborder="0" scrolling="no" allow="fullscreen; clipboard-read; clipboard-write" allowfullscreen></iframe>

In your space

  1. Click the Pencil+ icon in the top toolbar
  2. Choose Add mediaboard from the menu

  1. Choose the Embed HTML tile
  2. Paste the embed code
  3. Click the Create button

Click on the mediaboard to launch the Miro board

References:

https://help.miro.com/hc/en-us/articles/360016335640-Embedding-Editable-Boards-into-Websites 

Embed a metaverse in a Miro board

  1. Click the Plus+ icon in the left toolbar
  2. Search for iframe
  3. Paste the Hyperspace embed code

Adjust the embed code as highlighted

<iframe src="https://app.learnbrite.com/dashboard/spaces/visit/spcff80a891312fd907d44b49" 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="100%" height="100%" frameborder="0" scrolling="no" style="overflow: hidden; border: 0; position: absolute; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 100;"></iframe>

  1. Paste the embed code
  2. Click the Embed button

Click the frame to element to launch your Metaverse experience

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?