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.
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.
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 themoveToViewport
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}
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.
Updated almost 2 years ago