Custom actions are a quick way to get one or more tasks done with your apps. Users can launch a custom action associated with your app through the context menu of a board item.
ℹ️ Important: Custom actions are only supported for non-public apps that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will not be eligible for distribution via the Miro Marketplace.
[Placeholder]
- Included Features
- Tools and Technologies
- Prerequisites
- Associated Developer Tutorial
- Run the app locally
- Folder Structure
- License
- You have a Miro account.
- You're signed in to Miro.
- Your Miro account has a Developer team.
- Your development environment includes Node.js 14.13 or a later version.
- All examples use
npm
as a package manager andnpx
as a package runner. - Your app is a private app, and it's not publicly available on the Miro Marketplace. Currently, custom actions are available only for private apps.
To view a more in depth developer tutorial of this app (including code explanations) see the custom actions tutorial on Miro's Developer documentation.
-
Run
npm install
to install dependencies. -
Run
npm start
to start developing.
Your URL should be similar to this example:http://localhost:3000
-
Open the app manifest editor by clicking Edit in Manifest.
In the app manifest editor, configure the app as follows:sdkUri
: assignhttp://localhost:3000
as a value for this property.
It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.scopes
: add the permission scopes that users need to grant the app when they install it.
To enable the app to read from and write to the board, add the following permissions:boards:read
boards:write
-
Go back to your app home page, and under the
Permissions
section, you will see a blue button that saysInstall app and get OAuth token
. Click that button. Then click onAdd
as shown in the video below. In the video we install a different app, but the process is the same regardless of the app.
⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️
install-app.mov
- Go to your developer team, and open your boards.
- Click on a supported item, such as a sticky note.
- From the context menu that appears, click on the plus icon. If you hover over it, it will say
App actions
. - Select a custom action to send a notification to the Miro Board (see App Demo).
.
├── src
│ └── index.tsx <-- Where the custom actions are defined.
├── tsconfig.json <-- typescript configuration file
├── vite.config.ts <-- Vite configuration file
└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.
If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.