Embed a board via direct link

Getting started

To embed a Miro board, use the following URL:
https://miro.com/app/live-embed/{board_id}

Example: a Miro board embedded into an iframe via a direct link:

Here is the code that created this example:

<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>

Get the board_id

To obtain the board_id manually, open the Miro board in your browser. Copy the ID from the browser URL:
https://miro.com/app/board/{board_id}/

If you prefer a programmatic way to obtain the ID for a board, you can use the Miro REST API or the Boards Picker visual component.

Board access rights

Embedding a Miro board via a direct link uses the same access rights as the board itself, accounting for both user logins and board accessibility by link. This means that if a user can access the Miro board, the user can also access the embedded board. However, if the user does not have the required permission to access the board, the user is also unable to see the embedded board’s content (figure 1).

Figure 1. Access denied error, shown when a user does not have the required permissions to view the board.

Note that access issues can also occur if the user's browser blocks third-party cookies.

You can use the Boards Picker component to grant users additional permissions for an embedded board by using an access-link. For example, a user who normally has only View rights to a board can be granted Edit rights through the embedded board. For more information on the boardsPicker component, see the documentation.

Optional link parameters

There are a few parameters that can be added to a direct link to customize the initial appearance of an embedded Miro board.

Skip the See the board screen

By default, Miro Live Embed opens with a preloader screen that displays the name of the board. The user must click a button on this screen to load the board (figure 2).

If you prefer to skip the preloader screen and immediately display the content of the board when the web page loads, you can set the embedAutoplay parameter to true.
https://miro.com/app/live-embed/{board_id}/?embedAutoplay=true

Note: Any board embedded via the Boards Picker component will automatically include the embedAutoplay=true parameter, skipping the preloader screen.

Figure 2. 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 shows the contents of the Miro board.

Set the start view

You can load an embedded Miro board with a specific start view, displaying either a specific widget (figure 3) or a specific viewport (figure 4).

🚧

Note:

You cannot use both the moveToWidget and the moveToViewport parameters in a single embed link.

Display a specific widget as the start view

To display a specific widget as the start view for an embedded board, include the moveToWidget parameter in the direct link:
https://miro.com/app/live-embed/{board_id}/?moveToWidget={widget_id}

You can get a widget’s ID programmatically or manually. To get the widget ID programmatically, use the Miro REST API.

To get the widget ID manually:

1. Locate the widget on the Miro board.
2. Right-click on the widget, and select Copy link.
3. Identify the widget ID from the link that you copied. The link structures mirror each other, so you should be able to find the widget ID attached to the moveToWidget parameter.
   https://miro.com/app/board/{board_id}/?moveToWidget={widget_id}

Figure 3. Example of an embedded Miro board with a start view that includes a specified widget on that board.

Display a specific viewport as the start view

To display a specific viewport as the start view for an embedded board, include the moveToViewport parameter in the direct link:
https://miro.com/app/live-embed/{board_id}/?moveToViewport={x},{y},{width},{height}

The only way to get the current viewport is by using the Web-Plugins API.

Figure 4. Example of an embedded Miro board with a specified viewpoint as the start view.