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

A screenshot of an embedded Miro board showing the "Access Denied" error.
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.

Optional link parameter	Description	Possible values
`embedAutoplay`	Indicates whether to display or skip the preloader screen.	`true`: Skips the preloader screen `false`: Loads the preloader screen Default: `false`
`moveToWidget`	Sets the start view of the board’s content to the specified widget.	`widget_id` : The ID of the widget that must appear in the start view
`moveToViewport`	Sets the start view of the board’s content to the specified viewport.	`x`: The x-coordinate for the upper-left corner of the viewport `y`: The y-coordinate for the upper-left corner of the viewport `width`: The minimum width of the viewport `height`: The minimum height of the viewport
`boardsAccessToken`	Provides an access token for user authentication on the embedded board, when using the Boards Picker component.	This parameter is added by the Boards Picker component, and cannot be set manually.

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.

A side-by-side image of two screenshots of an embedded Miro board. The first screenshot shows the preloader screen, and the second image shows an active Miro board.
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:

Locate the widget on the Miro board.
Right-click on the widget, and select Copy link.
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}

A screenshot showing an example of an embedded Miro board where the start view is of a specified widget on that board.
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.

A screenshot showing an example of an embedded Miro board where the start view is of a specified viewport.
Figure 4. Example of an embedded Miro board with a specified viewpoint as the start view.