Action item
`), `style`, and `position` fields. The content field returns HTML — to strip tags before saving to Bubble's Text fields, use Bubble's `:extract with regex` operator with the pattern `(?s)<.*?>` replaced with empty string. Alternatively, use Bubble's `:regex replace` with pattern `<[^>]*>` and replacement ``. Set 'Use as' to 'Data' and mark `data` as the list in the Initialize call. ``` { "call_name": "Get Sticky Notes", "method": "GET", "path": "/boards/Action item: update onboarding flow
", "shape": "square" }, "style": { "fillColor": "yellow" }, "position": { "x": 100.0, "y": -200.0 } } ], "cursor": "next_page_cursor_string", "total": 87 } } ``` **Expected result:** The 'Get Sticky Notes' call fetches up to 50 sticky notes from the specified board. Each item in the data array has an id, content (as HTML string), and position. Bubble auto-detects all response fields after a successful Initialize call. ### 5. Save board items to Bubble's database and build the repeating group Now wire the Miro data into your Bubble app. First, create a new Data Type in the Data tab called 'Miro Item' with these fields: `item_id` (Text), `content` (Text), `board_id` (Text), `item_type` (Text), `color` (Text), and `created_date` (Date). This stores stripped note content separately from the raw API response. In your workflow editor, create a workflow triggered by a button ('Sync from Miro'). The first action is 'Get data from an external API' — choose 'Miro API — Get Sticky Notes' and supply your board ID (URL-encoded). The second action is 'Create a list of Things' using 'each item in API result's data': set `item_id` to `item's id`, `content` to `item's data's content` with `:regex replace` stripping the HTML tags, `board_id` to the board ID input, `item_type` to `item's type`. For the privacy rules: go to Data tab → Privacy → click on 'Miro Item.' Add a rule: 'Everyone else' → uncheck all permissions (View, Edit, Delete). Add a rule: 'Current User' → check 'View.' This prevents unauthenticated users from reading your board data through Bubble's Data API. To display the data, add a Repeating Group to your page. Set data type to 'Miro Item' and data source to 'Search for Miro Items.' Inside the cell, add Text elements bound to 'Current cell's Miro Item's content' and 'Current cell's Miro Item's item_type.' For pagination across large boards, add a 'Load More' button that triggers the same workflow with the cursor value from the last response stored in a custom state. **Expected result:** Clicking 'Sync from Miro' fetches sticky notes from the API, strips HTML tags from content, and saves them as Miro Item records in Bubble's database. The Repeating Group displays the saved items with clean text content. ### 6. Handle pagination for boards with more than 50 items Miro's API returns a maximum of 50 items per call, and Bubble's Repeating Group also has a 50-item list cap by default. For boards with more sticky notes, frames, or cards than 50, you must implement pagination using Miro's cursor parameter. First, add a custom state to your page: type Text, name `miro_cursor`. Initially it is empty. When the 'Get Sticky Notes' workflow runs, after creating Miro Item records from the response data, add a 'Set state' action: set `miro_cursor` to `result's cursor` (the cursor field from the API response). Add a 'Load More' button to your page, visible only when `miro_cursor` is not empty. When clicked, the button triggers the same sync workflow but passes `Current Page's miro_cursor` as the `cursor` URL parameter in the API call. Miro returns the next 50 items starting after the cursor position, and a new cursor value for the following page (or an empty cursor when all items have been loaded). For the Repeating Group display, change data source to 'Search for Miro Items: sorted by Created Date descending' rather than a live API call — this way the RG draws from Bubble's database (already paginated during sync), avoiding the 50-item cap at the UI layer. The database can hold all synced items; only the API calls are limited to 50 per request. ``` { "pagination_workflow": { "trigger": "Load More button clicked", "step_1": { "action": "Get data from external API", "api": "Miro API — Get Sticky Notes", "params": { "board_id": "and
instead of plain text Cause: Miro returns item content as an HTML string — `Action item
` rather than `Action item`. Bubble displays this raw string without rendering the HTML when used in a Text element. Solution: Apply Bubble's `:regex replace` operator on the content field: match pattern `<[^>]*>` and replace with an empty string. Do this at the point of saving to Bubble's database (in the Create Thing workflow step) so the stored content is always clean plain text. Alternatively, apply the transformation at display time in the Text element's dynamic expression. ### The repeating group only shows 50 items even though the board has more Cause: Miro returns a maximum of 50 items per API call. If the workflow creates Bubble database records from the API response but there is no pagination logic, only the first 50 items are ever synced. Solution: After the initial sync workflow runs, check whether `result's cursor` from the API response is non-empty. If it is, store it in a page custom state and show a 'Load More' button. Each click triggers the same workflow with the cursor parameter filled, fetching the next batch. Continue until `result's cursor` is empty, indicating all items have been loaded. ### The embedded Miro board shows a login screen inside the iframe instead of the board Cause: The board is set to 'Private' in Miro's sharing settings. Private boards require Miro authentication, which the iframe cannot handle — users see Miro's login page instead of the board. Solution: Open the board in Miro, click the Share button, and change the link access to 'Anyone with the link can view.' For the embed URL specifically, boards must be publicly accessible or the viewing user must be logged into Miro in the same browser. If the board must remain private, use the REST API data path instead of the iframe embed. ## Frequently asked questions ### Do I need a paid Miro plan to use the REST API? No — Miro's REST API is available on the Free plan. However, the Free plan limits you to 3 active boards per team. If you need more boards, a Starter ($8/user/month) or Business ($16/user/month) plan is required. The API itself doesn't have a plan gate; board access is what's gated. ### Why is my board ID showing %3D instead of = in the Miro URL? The `%3D` is the URL-encoded form of the equals sign `=`. Miro board IDs use base64 encoding, which frequently ends in one or two `=` characters. Browsers automatically display these as `%3D` in the URL bar. When using the board ID in API calls, always use the `%3D` encoded version in the URL path — using `=` directly will break the URL silently. ### Can I write data back to Miro from Bubble — for example, create sticky notes? Yes — the Miro REST API v2 supports POST requests to create items on a board. Add a second API Connector call with method POST to `/boards/{board_id}/items`, set the body type to JSON, and include the item type, content, and position fields. This lets Bubble workflows create sticky notes or cards on a Miro board programmatically. ### Does Bubble need a paid plan for this integration? The basic integration — embedding a board via iframe and reading data via the API Connector — works on Bubble's Free plan. A paid Bubble plan is only required if you want to receive real-time Miro webhook events (which requires Backend Workflows, a paid feature) or if you implement a full OAuth 2.0 user-level token flow with token refresh Backend Workflows. ### How do I handle Miro access tokens that expire after 1 hour? If you are using a static Miro app token (the recommended approach for single-team tools), it does not expire — you don't need to handle refresh. If you implement a full OAuth 2.0 authorization-code flow for multi-user access, the resulting access tokens expire after 1 hour. In that case, store the refresh token in Bubble's User data type and build a Backend Workflow that calls Miro's token refresh endpoint before each batch of API calls. This requires a paid Bubble plan. ### What is the difference between the Miro embed iframe and the REST API? The iframe embed shows a live, interactive Miro board inside your Bubble page — users can zoom, pan, and (if they have edit access) add sticky notes. No API key is needed, but the experience depends on the user's Miro board permissions. The REST API extracts structured data from the board — sticky note text, card metadata, frame labels — into Bubble's database, where you can run workflows, build charts, and trigger actions. Most useful integrations combine both: the iframe for real-time visual collaboration and the API for data extraction and automation. --- Source: https://www.rapidevelopers.com/bubble-integrations/miro © RapidDev — https://www.rapidevelopers.com/bubble-integrations/miro