How to embed editable boards into websites

Embed your Miro boards into other websites and collaborate with your partners, colleagues, and clients right within the web pages. You can set any level of access to the board and allow people to view, comment, or edit the embedded boards without having to visit Miro - the feature will take your website to a new level of interactivity and engagement!

Set up by: board editors
Available for: all plans

✏️ The option to share boards for public editing is available on paid plans only.

✏️ Enterprise plan admins need to allow public sharing in the Security settings to unlock the embed feature.

The Customer Journey Map board embedded into this article with a view-only access

The Customer Journey Map board embedded into this article in the Presentation mode

How to embed a Miro board

You can embed your boards into such websites as:

• Coda
• Notion
• ClickUp
• Confluence
• any other websites that support iframe (including WordPress and Webflow sites)

To embed a Miro board, click Embed on the board Export menu:

The option to embed board on the Export menu

You will see the embed menu that will give you the options to change board sharing settings, set the start area, customize the embed height and width, and copy the embed code.

Board embed menu

Please note that embedded board access depends on the sharing status of the board and is the same as on the Miro side. To make the embed available for non-registered users, please enable the public link in the board share settings. If you switch off the public link, then users who do not have direct access to the board will not be able to view it.

Making a board public in share settings

Set the start area to define which part of the board will be first shown on the embed.

✏️ You can set different start views for different embeds of the same Miro board.

Settings the start area for Miro board embed

Another option is to allow board visitors to switch between frames in the presentation mode. Choose Presentation mode on the embed menu and select the frame which will be displayed first on the embed. If the board does not have frames, you will be suggested to create one.

⚠️ Currently, links and videos are not clickable on boards embedded in the presentation mode.

Selecting the first frame in the presentation mode

You can also customize the embed size by changing the parameters on the embed menu. To copy the code, simply click it.

Changing the embed width and copying the embed code

By default, Miro Live Embed opens with a pre-loader screen that displays the name of the board and suggests that the user clicks a button to load the board or requests access to the board if the board is not public. To enable the board autoplay (no need to click See the board to load the board content),

• for boards embedded in the Presentation mode, add &autoplay=yep after the board URL to the iframe code
• for boards embedded in the Free navigation mode, add &embedAutoplay=true after the board URL to the iframe code. Example:

⚠️  Autoplay is only applicable if the Miro board is embedded in external web pages. The play button will always remain if you embed a Miro board in another Miro board.

⚠️ Note that due to iframe technology limitations, sometimes the loading time of an embedded board can be longer than usual. 

⚠️ If third-party cookies are blocked in your browser there can be unexpected issues displaying embedded boards.

⚠️ On mobile devices, embedded boards are currently available for viewing only.

Difference between the embedded board UI and the web board UI

The board interface of a board embedded into a website is slightly different from the board interface in the Miro app/in a separate browser tab. 

• The board name in the top-left corner of embedded boards is unclickable
• The mini-map panel and notes do not open automatically as you open the embed
• In the board settings, you will not find such options as Set start view, Discover apps and tools, and Account settings
• In the export menu, only these options are available: Save as template, Send to GoogleDrive, Add to JIRA, Send to interactive display
• All pop-ups are disabled on embedded boards
• There is no entry point for the Visual Learning Center on embedded boards

Frequently asked questions

1. Can I let others edit my embedded board?
   - Yes, in order to allow all people to edit your board, please enable Anyone with the link can edit option in the board sharing settings.
   
   
2. How can I fully integrate Miro into my app?
   - Please refer to this article for more information.
   
   
3. Can I embed editable boards on Free plan?
   - Yes, those users who have been invited to the board as editors on the Miro's side will be able to edit the embed. Please note that the option to give editing access to all (even non-registered) users is only available on paid plans.
   
   
4. Can I remove the Miro logo on the embeds?
   - No, it is not currently possible.
   
   
5. Can I use the "upload" files functionality on the embedded boards?
   -  Yes, but only limited functionality is available (please see the screenshot below). The option to upload files from cloud storages (OneDrive, Google Drive, Dropbox, etc.) isn't available in the embed mode.
   
   
6. Can I embed a Miro board into another Miro board?
   - Yes, copy the embed code of the board, open another board, choose Paste iFrame code on the board's toolbar and paste the embed code. Note that autoplay is not applicable to boards embedded in other Miro boards.
   Learn more about embedding media to boards.
   
   
7. Can I embed my boards without editing options for viewing only?
   - Yes, please set the corresponding access rights for the board on the board Share menu (Anyone with the link can view). Learn more about board access. 
   
   
8. How can I embed a Miro board in Confluence?
   - There are several ways to embed the board: via Easy HTML, using the Confluence Plugin, or with Atlassian Smart Link.