Live Embed with a direct link

Embed a Miro board inside an iframe with a direct link.

Use a live embed direct link

A quick way to embed a Miro board into another product is by specifying a live embed direct link to the board.
The direct link has the following format:

https://miro.com/app/live-embed/{board_id}

The only variable in the URL is {board_id}.
Replace the placeholder with the actual unique ID of the board to embed.

Example of a Miro board embedded inside an iframe through a direct link:

The corresponding raw source with the HTML markup to embed the board:

<iframe width="768" height="432" src="https://miro.com/app/live-embed/o9J_kkQxX78=/?moveToViewport=-23165,-5837,13803,7546" frameBorder="0" scrolling="no" allowFullScreen></iframe>

Optional URL parameters

You can append additional URL parameters to a direct link to customize the initial display of an embedded Miro board.

Optional URL parameterDescriptionPossible values
embedAutoplayIndicates whether to display or skip the preloader screen.
  • true: skips the preloader screen
  • false: loads the preloader screen
Default: false
moveToWidgetSets the initial view of the embedded board to the specified board item.The ID of the board that the initial view of the embedded board focuses on.
moveToViewportSets the initial view of the embedded board to the specified viewport.
  • x: the horizontal coordinate of the top-left corner of the viewport.
  • y: the vertical coordinate of the top-left corner of the viewport.
  • width: the minimum width of the viewport.
  • height: the minimum height of the viewport.
boardsAccessTokenProvides an access token for user authentication on the embedded board, when using the BoardsPicker component.The BoardsPicker component appends the parameter automatically; it's not possible to set it manually.
usePostAuthIndicates whether to enable POST message authentication
  • true: enforces POST message authentication.
  • false: lets the Miro authentication interface select the appropriate method automatically.
Default: false

Get the board ID

In the board URL, board_id is the URL element that follows the /app/board/ subdirectory.
For example, in the board URL https://miro.com/app/board/o9J_l9_I58Q=/, the board_idis o9J_l9_I58Q=.

You can also obtain the board ID programmatically with the Miro REST API and the BoardsPicker visual component.

Skip the preloader screen

By default, Miro Live Embed opens with a preloader screen that displays the name of the board. To lead the embedded board, users must click a button on the preloader screen (figure 1).

To skip the preloader screen and to immediately display the content of the board when the web page loads, set the embedAutoplay URL parameter to true:

https://miro.com/app/live-embed/{board_id}/?embedAutoplay=true

embedAutoplay=true is the default setting when embedding boards with the BoardsPicker component.

A side-by-side image of two screenshots of an embedded Miro board. The image on the left shows an example of the preloader screen. The image on the right is an example of setting `embedAutoplay=true`, and it shows the contents of the Miro board.A side-by-side image of two screenshots of an embedded Miro board. The image on the left shows an example of the preloader screen. The image on the right is an example of setting `embedAutoplay=true`, and it shows the contents of the Miro board.
Figure 1. A side-by-side image of two screenshots of an embedded Miro board. The image on the left shows an example of the preloader screen. The image on the right is an example of setting embedAutoplay=true, and it shows the contents of the Miro board.

Set the initial view

You can load an embedded Miro board that displays a specific initial view: either a specific widget (figure 2) or a specific viewport (figure 3).

📘

You can set the initial view of the embedded board on either a specific board item, or a specific viewport.
Therefore, a direct link to embed a Miro board can include either moveToWidget or moveToViewport URL parameters.
It's not possible to specify both in the same direct link.

Set the initial view based on a specific board item

To display a specific board item as the initial view for an embedded board, add the moveToWidget URL
parameter to the direct link, and specify the ID of the item:

https://miro.com/app/live-embed/{board_id}/?moveToWidget={item_id}`

To obtain the board item ID manually:

  1. Locate the item on the board UI.
  2. Right-click the item, and select Copy link.
  3. In the copied link, identify the item ID.
    The board item ID is the value of the moveToWidget parameter in the copied link.
    Example:
    <!-- In the example URL, the board item ID is "3458764521234567890" -->
    https://miro.com/app/board/{board_id}/?moveToWidget=3458764521234567890
    

💡 You can also obtain the board item ID programmatically with the Miro REST API.

Example of an embedded Miro board with an initial view based on a specific item on the board.Example of an embedded Miro board with an initial view based on a specific item on the board.
Figure 2. Example of an embedded Miro board with an initial view based on a specific item on the board.

Set the initial view based on a specific viewport

To display a specific viewport as the initial view for an embedded board, add the moveToViewport URL parameter to the direct link, and specify the viewport coordinates and dimensions:

https://miro.com/app/live-embed/{board_id}/?moveToViewport={x},{y},{width},{height}

To obtain the current viewport coordinates and dimensions, use the Miro Web SDK get method for the viewport.

Example of an embedded Miro board with an initial view based on a specific viewport on the board.Example of an embedded Miro board with an initial view based on a specific viewport on the board.
Figure 3. Example of an embedded Miro board with an initial view based on a specific viewport on the board.

See also


Did this page help you?