Skip to content

Latest commit

 

History

History

custom-actions

README.md

Miro Custom Actions

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.

👨🏻‍💻 App Demo

custom_actions_demo.mov

📒 Table of Contents

⚙️ Included Features

🛠️ Tools and Technologies

✅ Prerequisites

  • 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 and npx 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.

📖 Associated Developer Tutorial

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 the app locally

  1. Run npm install to install dependencies.
  2. Run npm start to start developing.
    Your URL should be similar to this example: 
    http://localhost:3000
  3. Open the app manifest editor by clicking Edit in Manifest.
    In the app manifest editor, configure the app as follows and then click save:
# See https://developers.miro.com/docs/app-manifest on how to use this
appName: Custom Actions
sdkVersion: SDK_V2
sdkUri: http://localhost:3000
scopes:
  - boards:read
  - boards:write
  1. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add 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
  1. Go to your developer team, and open your boards.
  2. Click on a supported item, such as a sticky note.
  3. From the context menu that appears, click on the plus icon. If you hover over it, it will say App actions.
  4. Select a custom action to send a notification to the Miro Board (see App Demo).

🗂️ Folder structure 

.
├── 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.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.