4) Interact with your app in Miro
In the fourth task of the guided onboarding, you interact as a board user with your running app.
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:async function init() { board.ui.on("icon:click", async () => { await board.ui.openPanel({ url: "app.html" }); }); }
Action: open your app in Miro
- 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
. - On the Miro board, select the + More apps button at the bottom of the left-hand app toolbar.
- Your app should appear in the list under the name you originally gave it in task 3.
Click your app icon. - The app panel opens, and it exposes the drag and drop app interface.
- 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!
See also
Updated about 1 year ago
In the fifth task of the guided onboarding, you join the Miro Developer Community to ask questions and exchange ideas.