Answered

How to start building

  • 29 October 2020
  • 2 replies
  • 624 views

Hi guys,

I want to code a simple calculator to use inside the Miro environment.

Since I am completely new to doing this in Miro: Do I need to build this functionality within my own HTML environment and embed this piece of code within Miro using something like an iframe? I can’t figure out if it’s always a ‘web plugin’ you’ll have to load from your own website/environment.

If someone can explain me where to start, thanks a lot!

All the best,

Bob


 

icon

Best answer by Daniela Gavidia 29 October 2020, 14:56

View original

2 replies

Hi Daniela,

Thanks this helps a lot. Great!

All the best,

Bob

Userlevel 4
Badge

Hello Bob,

 

The Miro SDK allows you to extend the functionality of Miro by adding your own code in certain sections of Miro called extension points:
https://developers.miro.com/docs/how-to-use-extension-points

 

To build a calculator, you would have to create a web-plugin. You would have to host the code for your web-plugin in an external server (like Netlify or Github pages) and you would tell Miro where to find the code to your web-plugin in the App Settings (see Step 3):
https://developers.miro.com/docs/how-to-start

 

In the code for your web-plugin, you would use the Miro extension points to add functionality. This example should make it more clear:
https://developers.miro.com/docs/web-plugin-examples#looking-glass

If you look at the code for the web-plugin, we use two extension points: the bottomBar and the LeftSidebar. We add a button to the bottomBar and when the button is clicked we open the LeftSidebar and load your custom UI there. In your case, you could do the same and load your calculator in the sidebar. The calculator itself would be some html/js/css that is served from an external server. Another option would be to use the ModalWindow to show your calculator.

I hope this makes things more clear.

Kind regards.

Daniela

Reply