How to build a web-plugin

1. Try the SDK using browser developer tools (optional)

You can experiment with the Miro SDK using the JavaScript console in your browser while a Miro board is open. This allows you to try out and debug your code without having to create and install a Miro app.

  1. Open the console tab in your browser developer tools.
  2. Wait until the "SDK Loaded" message appears.
  3. Try making SDK calls directly from the console, such as:
    await miro.board.widgets.get().

For example, to create a sticker, update the content and color of that sticker, and then delete that sticker, you can add the following code in your browser JavaScript console:

const waitOneSec = () => new Promise(r => setTimeout(r, 2000))
let sticker = (await miro.board.widgets.create({type:'sticker', text: 'Hello'}))[0]
await miro.board.viewport.zoomToObject(sticker)
await waitOneSec() // timeout only for demo purpose
await miro.board.widgets.update({id: sticker.id, text: 'world!', style:{stickerBackgroundColor:'#7ac673'}}) // update sticker
await waitOneSec()
await miro.board.widgets.deleteById(sticker.id) // delete sticker

2. Create your web-plugin

Create an index.html file that bootstraps your web-plugin, and then publish your index.html file on the web over https.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://miro.com/app/static/sdk.1.1.js"></script>
    <script>
    miro.onReady(() => {
      miro.initialize({
        extensionPoints: {
          bottomBar: {
            title: 'Some title',
            svgIcon: '<circle cx="12" cy="12" r="9" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
            onClick: () => {
              alert('Hi!')
            }
          }
        }
      })
    })
    </script>
</head>
</html>

For development purposes, you can serve your index.html from a local web server using http-server, and you can use ngrok to expose your local web server over https. Alternatively, you can use services like Glitch or GitHub Pages for hosting static content.

3. Create an app

If you haven't created a developer team earlier, you must create a developer team before proceeding with the rest of the steps to create an app.

Go to Your apps from your Profile settings.
Agree on our Terms and Conditions, and you are ready to create a brand new app.

Give your app a name and description, select your developer team, and click Create app.

You will then be taken to the settings for your app.

Set the Web-plugin URL to the publicly accessible address of your index.html file and click Save.

❗️

Note that your web-plugin index.html file must be hosted over https.

Select the OAuth scopes that your web-plugin will require. For example, select the boards:read and boards:write scopes if your web-plugin will read and modify board content.

Click the Install app and get OAuth Token button to add your web-plugin to the boards for your developer team.

Create a board within your developer team to access and test your web-plugin.

📘

Tips & Tricks

You can call reloadSandbox() in your browser JavaScript console to refresh your web-plugin without reloading the page.

4. Share your app with other users

See Share your app .


Did this page help you?