4) Interact with your app in Miro

Time to complete

~5 minutes

Learning objective

After completing this onboarding task, you’ll be able to:

• Understand how to access an app from within a Miro board, and perform an action between the app itself and Miro.

After cloning our drag and drop sample app in task 3, get it up and running on your Miro board by following the steps below.

📘

If you prefer to build your app from scratch instead of using our drag and drop sample app, make sure that the app headless iframe handles the icon:click event that triggers opening the app panel:

TypeScript

async function init() {
  board.ui.on("icon:click", async () => {
    await board.ui.openPanel({ url: "app.html" });
  });
}

Action: open your app in Miro

1. Ensure your app is running on your specified app URL and that you've already installed and authorized it in task 3.
   For example: http://localhost:3000.
2. On the Miro board, select the + More apps button at the bottom of the left-hand app toolbar.
3. Your app should appear in the list under the name you originally gave it in task 3.
   Click your app icon.
4. The app panel opens, and it exposes the drag and drop app interface.
5. Select one of the images and drag it onto the Miro board!

Let's wrap up

In this onboarding task, you:

• Launched a Miro app from the board, and
• Interacted with the board UI via the app.

Now that you’ve launched an app in Miro, it’s time to join the conversation with other developers in task 5.

📘

Recommended in-depth training

Now that you've completed tasks 1-4, check the first in-depth training, which builds on the foundation you've built so far!

Training 1: create your 1st Miro app locally

See also

• Drag and Drop Sample App