Interface: IPluginConfigExtensionPoints

Extensions points allow you to enhance the user interface with buttons.

You can define your own buttons using these extensions points, each extension
points accepts a specific configuration and has its own limitations.

Some extensions points only allow you to add up to one button.

Hierarchy

IPluginConfigExtensionPoints

Index

Properties

bottomBar

• Optional bottomBar: ButtonExtensionPoint<BottomBarButton>

The toolbar seen on the bottom left side of the board

You can directly define a BottomBarButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      bottomBar: {
        title: "The button title",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a bottom bar item!");
        },
      },
    },
  });
});

exportMenu

• Optional exportMenu: ButtonExtensionPoint<ExportMenuButton>

The toolbar seen when the user opens the export menu.

You can directly define a ExportMenuButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      exportMenu: {
        title: "The button title",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a export menu item!");
        },
      },
    },
  });
});

getWidgetMenuItems

• Optional getWidgetMenuItems: undefined | (widgets: IWidget[], editMode: boolean) => Promise<IWidgetMenuItem | IWidgetMenuItem[]>

Deprecated
This method is deprecated.

deprecated

toolbar

• Optional toolbar: ButtonExtensionPoint<ToolbarButton>

The toolbar seen on the left side of the board

You can directly define a ToolbarButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      toolbar: {
        title: "The button title",
        librarySvgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        toolbarSvgIcon:
          '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a toolbar item!");
        },
      },
    },
  });
});