To embed a Miro board, use the following URL:
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>
To obtain the
board_id manually, open the Miro board in your browser. Copy the ID from the browser URL:
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.
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|
|Indicates whether to display or skip the preloader screen.|
|Sets the start view of the board’s content to the specified widget.|
|Sets the start view of the board’s content to the specified viewport.|
|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.|
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
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.
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).
You cannot use both the
moveToViewportparameters in a single embed link.
To display a specific widget as the start view for an embedded board, include the
moveToWidget parameter in the direct link:
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
Figure 3. Example of an embedded Miro board with a start view that includes a specified widget on that board.
To display a specific viewport as the start view for an embedded board, include the
moveToViewport parameter in the direct link:
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