Live Embed with a direct link (2024)

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=/?autoplay=true&moveToViewport=-23165,-5837,13803,7546" frameBorder="0" scrolling="no" allowFullScreen></iframe>

This breakdown of the Miro Live Embed direct link URL shows the purpose of the URL parameters in the context of embedding a Miro Live Embed board in an iframe:

// Miro domainhttps://miro.com/app// Specifies handling the board as Miro Live Embed.live-embed// The ID of the board to live embed in an external website or product.o9J_kkQxX78// Skips the preloader screen.autoplay=true// Sets the initial board view to a specific viewport.moveToViewport=-23165,-5837,13803,7546

You can append additional URL parameters to a direct link to customize the initial display of a Miro Live Embed board, and to set specific options.

For example, the following direct link inside an iframe creates a Miro Live Embed board that:

  • Skips the preloader screen.
  • Renders the embedded board in distraction-free, read-only mode.
  • Zooms to a specific viewport.
  • Zooms to a specific board item inside the viewport.
  • Allows users to toggle between embedded and full-screen view of the board.
<iframe width="768" height="432" src="https://miro.com/app/live-embed/o9J_kkQxX78=/?autoplay=true&embedMode=view_only_without_ui&moveToViewport=-21906,-1704,6787,4269&moveToWidget=3074457350605242225" frameBorder="0" scrolling="no" allowFullScreen></iframe>
Optional URL parameterDescriptionPossible values
autoplayIndicates whether to display or skip the preloader screen.
  • true: skips the preloader screen
  • false: loads the preloader screen
Default: false
embedModeLive Embed with a direct link (1) Experimental

Sets the embed mode of the board:

  • Either distraction-free, view-only mode.
  • Or a board with standard UI.
Live Embed with a direct link (2) Experimental
  • view_only_without_ui: embeds the board in Live Embed view-only mode.
  • No value: it defaults to embedding a board with standard UI.
moveToWidgetSets the initial view of the embedded board to the specified board item.The ID of the board item 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.
boardsAccessTokenElevates user access to the embedded board.
BoardsPicker generates the parameter automatically.
The BoardsPicker component appends the parameter automatically.
It's not possible to set it manually.

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 autoplay URL parameter to true:

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

If you embed a board with BoardsPicker, the default value of autoplay is true: autoplay=true.

Live Embed with a direct link (3)

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.

Live Embed with a direct link (4)

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.

Live Embed with a direct link (5)

  • Live Embed view-only mode
  • Live Embed reference

Updated 12 months ago

What's next

Embed a Miro board in view-only mode with minimal UI.

  • Live Embed view-only mode
Live Embed with a direct link (2024)

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Jamar Nader

Last Updated:

Views: 6639

Rating: 4.4 / 5 (55 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Jamar Nader

Birthday: 1995-02-28

Address: Apt. 536 6162 Reichel Greens, Port Zackaryside, CT 22682-9804

Phone: +9958384818317

Job: IT Representative

Hobby: Scrapbooking, Hiking, Hunting, Kite flying, Blacksmithing, Video gaming, Foraging

Introduction: My name is Jamar Nader, I am a fine, shiny, colorful, bright, nice, perfect, curious person who loves writing and wants to share my knowledge and understanding with you.