Overview

To ensure that app cards in a Miro board and their associated items in a third-party tool are synced, you must implement the integration logic required to take care of various aspects of an app card integration with a third-party tool. We’ve provided the bare minimum flow that we recommend for different use cases when using app cards. You can then implement customized integration logic on top of this to enhance your integration. Figure 1 illustrates the minimum infrastructure required for app card and third-party tool integration. The following sections in this document provide more information on different components of this infrastructure.

Figure 1. The minimum infrastructure required for app card and third-party tool integration.

Install app in Miro

Send a request from the app installation screen to the backend at your end. You should have your backend configured in the App settings page. For more information, see Enable REST API authentication from Miro's Web SDK authorization.
Authenticate the user in the third-party tool.
Create a connection or mapping between the Miro user and the third-party tool user.
Store the Miro token and the third-party tool token in your backend. Figure 2 illustrates the sample database mapping for user IDs and items between Miro and a third-party tool.

Figure 2. Sample database mapping for user IDs and items between Miro and a third-party tool.

Here are some handy references for app installation and authorization:

Create an app card in Miro:

Request sent from Miro Web SDK app to the integration backend. For more information, see the Miro Web SDK reference for app cards.
Integration backend makes a request to the third-party tool to create a link between an app card and the corresponding item in the third-party tool. The connection is established between the app card and the third-party tool.

Edit, update, and keep app cards synced

Update an app card in Miro:

Request sent from Web SDK to the integration backend. For more information, see the Miro Web SDK reference for app cards.
Integration backend fetches third-party tool token for the Miro user who made the update operation.
Integration backend makes a request to the third-party tool to update the item.
Third-party tool item is updated using the third-party tool token of the user who made the update.
Third-party tool sends the information about the updates to the integration backend via Webhooks, SDK, or API.
Integration backend fetches all the app cards that are linked to this third-party tool item.
Integration backend updates the app cards with the new information by making Miro REST API calls using the Miro token of the user who created the app card. For more information, see the Miro REST API reference for updating app cards.

Update the item in the third-party tool:

Third-party tool item is updated inside the third-party system.
Third-party tool sends the information about the updates to the integration backend via Webhooks, SDK, or API.
Integration backend fetches all the app cards that are linked to this third-party tool item.
Integration backend updates the app cards with the new information using the app card creator token via the Miro REST API. For more information, see the Miro REST API reference for updating app cards.

Backend flow for app cards