Live Embed with BoardsPicker for unregistered users

Embed Miro boards in a website with BoardsPicker to share embedded boards with other users who don't need to have a Miro account.

BoardsPicker for unregistered users

Integrating Miro’s BoardsPicker into your website enables site users to collaborate and share ideas with Miro whiteboards in real time.

Your users don’t need to have a Miro account to use BoardsPicker to embed Miro boards and collaborate on your site. Miro's BoardsPicker enables users who haven’t signed up for a Miro account to create temporary boards, and to embed them on websites using an iframe.

🚧

To enable embedding a temporary board for anonymous users, you need to contact Miro.
The process to approve your request can take one month.

Enable BoardsPicker for unregistered users

To enable unregistered users to create temporary boards and embed them on your website, in the miroBoardsPicker.open object do the following:

  • Specify the clientId of the app that requests user authorization to embed a board.
  • Set the action type to access-link.
  • Set allowCreateAnonymousBoards to true to enable creating boards for users who don't have a Miro account.
  • Get a JSON Web Token (JWT) for the BoardsPicker from your app backend.
  • Specify a function for the success property.
  • Specify a function for the error property.
  • Specify a function for the cancel property.

Generate a JWT

JWTs grant your application access to interact and share resources with external parties. In this case, with the BoardsPicker component. This token also enables new boards for the integration.getToken method.

Example:

function onClick() {
  miroBoardsPicker.open({
    clientId: '<your_app_client_id>', // Replace the placeholder with your app Client ID
    action: 'access-link',
    allowCreateAnonymousBoards: true, // Enable creating anonymous boards
    getToken: () => getTokenFromServer(), // Provide token in an async way
    success: data => {
      console.log('on success', data)
      document.querySelector('#container').innerHTML = data.embedHtml
    },
    error: e => {
      console.log('on error', e)
    },
    cancel: () => {
      console.log('on cancel')
    },
    
    windowRef: windowRef, // Optional. Link to an already opened popup window. 
  })
}

Example of lazy loading for boardsPicker.js:

// Type: () => Promise<string>
function getTokenFromServer() {
  // Get JWT from your server.
  return fetchPost('https://example.com/token-for-integration-with-miro')
}

To generate a JWT on your backend:

  1. Get the JWT library for your server language.
  2. In the JWT payload data, assign the iss field the client ID of your app.
  3. To sign the JWT, use the client secret with the HMAC256 algorithm.
  4. In the JWT payload data, assign the exp field an expiration date that doesn't exceed 24 hours.
    Example in Java, using the auth0 library:
    JWT.create()
      .withIssuer("CLIENT_ID")
      .withExpiresAt(new Date(System.currentTimeMillis() + TimeUnit.MINUTES.toMillis(5)))
      .sign(Algorithm.HMAC256("CLIENT_SECRET"));
    
  5. Send a POST request to your app backend using the Fetch API.
    Example:
    fetch("https://example.com/token-for-integration-with-miro", {method: "post"})
    
    The response returns a JWT.

📘

  • You don’t need to generate the JWT for each user.
  • Don’t generate a token on the client side.
  • You can generate the JWT for each timeout.
  • Ensure that your user authorization token signs your endpoint.
  • You must take all necessary precautions to keep your JWTs safe.

See also


Did this page help you?