What is an extension point?

Miro apps are a combination of functionalities and entry points that are called extension points. As a developer, you can use these extension points to render your app in the product.

We provide two types of extension points:

  1. Button extension points: allow a solution to be accessed from the canvas by adding one or more icon buttons in the UI:
  1. Container extension points: allow rendering a custom HTML in a container on the canvas:

🚧

An app needs an extension point

Apps that are part of the UI will always use a button extension point. Some apps might require both button and container extension points to function.

How to choose between button and container extension points

Some apps are simple and might require only a button extension point. For example, if you want to create an app that will duplicate the selection on your board, you don't need to use a container. You just need a button on the UI that triggers the action and modifies the board.

Other apps might require a combination of both the button and container extension points, first by accessing it via the button and then rendering the custom HTML in one of our container extension points. Unsplash, for example, is using a button extension point to trigger the Library container extension point to show images from Unsplash.


Button extension points

Toolbar

The toolbar button extension point is mainly used to render content apps for the canvas.

Apps will be present in the More icon at the bottom, but if you drag it you can make it to be visible all the time.Apps will be present in the More icon at the bottom, but if you drag it you can make it to be visible all the time.

Apps will be present in the More icon at the bottom, but if you drag it you can make it to be visible all the time.

Bottombar

The bottom bar button extension point is mainly used to render collaboration apps or content that can be represented in a different format.

Comments is not an app that can be installed, but it is using the **bottomBar* extension point to present all comments which are on the board and display them in a different format.Comments is not an app that can be installed, but it is using the **bottomBar* extension point to present all comments which are on the board and display them in a different format.

Comments is not an app that can be installed, but it is using the *bottomBar extension point to present all comments which are on the board and display them in a different format.

Export Menu

The ExportMenu button extension point is used to render export functionalities.

Google Drive is using the ExportMenu extension point to save and export your Miro board to Google Drive.Google Drive is using the ExportMenu extension point to save and export your Miro board to Google Drive.

Google Drive is using the ExportMenu extension point to save and export your Miro board to Google Drive.


Container extension points

Library

The Library is used to render materials that you can drag & drop on the canvas.

Example apps: Unsplash, IconFinder, AWS icon setExample apps: Unsplash, IconFinder, AWS icon set

Example apps: Unsplash, IconFinder, AWS icon set

Left Sidebar

The Left Sidebar is used for collaborative apps, data search, automatization.

Example apps: ChatExample apps: Chat

Example apps: Chat

Bottom Panel

The Bottom Panel, is used for apps that require interactions while still keeping the board available. It can be extended to 320px width and 200px height.

Example apps: Video chat, TimerExample apps: Video chat, Timer

Example apps: Video chat, Timer

Modal Window

The Modal window, is used for dialogs that require a decision to be made or to be filled with content.

Example apps: JiraExample apps: Jira

Example apps: Jira

Resources

Components
Icon set
UI Templates


Did this page help you?