Lucidchart

Before you can embed a Lucidchart diagram in Bubble, you need to publish it and set the correct sharing permissions. This takes about two minutes in Lucidchart. Open the diagram you want to embed in Lucidchart. Click 'File' in the top menu bar → 'Share' (or click the Share button in the top-right area of the editor). In the sharing dialog: 1. Find the sharing permission dropdown — it likely says 'Private' or 'Only people invited'. Change it to 'Anyone with the link can view'. This is required for the iframe to render. If this is set to private, the iframe shows a blank box or Lucidchart's login page instead of your diagram. 2. Click on the 'Embed' tab within the share dialog (it may be labeled 'Embed' or 'Publish' depending on your Lucidchart version). You will see an iframe code block like: <iframe src='https://lucid.app/documents/embeddedchart/YOUR_DOCUMENT_ID' frameborder='0' allowfullscreen></iframe> Copy the full iframe tag, or at minimum note the embed URL (the src value: https://lucid.app/documents/embeddedchart/YOUR_DOCUMENT_ID). The document ID is the alphanumeric string at the end. If you want to make the diagram live-updating (so when you edit it in Lucidchart, the Bubble app shows the updated version automatically), leave the embed URL as-is — Lucidchart's embed always renders the latest saved version of the published diagram.

Now place the diagram in your Bubble app. The HTML Element is Bubble's way of adding custom HTML markup that renders inside your page layout. In the Bubble editor, open the page where you want to show the diagram. Click the '+' icon in the element toolbar or go to Add Elements → HTML. Draw the HTML Element on the page at the size you want the diagram to appear — make it at least 600px wide and 400px tall for a readable diagram. Double-click the HTML Element (or click Edit in the property panel) to open the HTML editor. Paste the following code, replacing YOUR_DOCUMENT_ID with the document ID from Step 1: <iframe src="https://lucid.app/documents/embeddedchart/YOUR_DOCUMENT_ID" frameborder="0" style="width:100%;height:100%;" allowfullscreen></iframe> The style attribute makes the iframe fill the HTML Element's dimensions so you can control size by resizing the Bubble element itself. Set allowfullscreen so users can expand the diagram if needed. Click 'Close' to exit the HTML editor. In the Bubble preview, the diagram should render immediately. If it shows a blank box or a Lucidchart login page: - Go back to Lucidchart and confirm the sharing is set to 'Anyone with the link can view' (Step 1) - Check that you copied the correct embed URL (it should contain /embeddedchart/ in the path, not /lucidchart/ or /documents/) Resize the HTML Element in Bubble until the diagram fits your layout. The iframe preserves the diagram's aspect ratio and shows scroll bars if the element is smaller than the diagram content.

1<iframe
2  src="https://lucid.app/documents/embeddedchart/YOUR_DOCUMENT_ID"
3  frameborder="0"
4  style="width:100%;height:100%;"
5  allowfullscreen>
6</iframe>

If you want to show different diagrams for different records (different departments, different clients, different projects), store the embed URLs in a Bubble database and bind the HTML Element dynamically. In the Bubble editor, go to the Data tab → Data types → click 'New type' → name it 'Diagram' (or add a field to an existing type like 'Project' or 'Department'). Add the following fields to the Diagram data type: - diagram_url (text) — the full embed URL from Lucidchart (https://lucid.app/documents/embeddedchart/...) - name (text) — a human-readable title for the diagram - category (text or option set) — optional, for filtering Go to the App Data tab and create some Diagram records manually by pasting in your embed URLs and titles. On your Bubble page, add a Repeating Group with 'Type of content' set to 'Diagram' and 'Data source' set to 'Do a search for Diagrams'. In each cell, add an HTML Element. Here is the key step: in the HTML Element, instead of hardcoding the iframe URL, use Bubble's dynamic text feature. Click the HTML editor → in the source attribute, replace the hardcoded URL with the dynamic expression for the current cell's diagram_url field. Bubble will generate an expression like: <iframe src="[current cell's Diagram's diagram_url]" frameborder="0" style="width:100%;height:500px;" allowfullscreen></iframe> In Bubble's HTML editor, you use the 'Insert dynamic data' button (the lightning bolt icon) to insert the dynamic expression rather than typing it literally. Add Privacy rules: go to Data → Privacy → 'Diagram' type. Add a rule that only logged-in users (or the appropriate role) can view Diagram records. This prevents the list of embed URLs from being publicly accessible through Bubble's Data API endpoint.

1<iframe
2  src="[current cell's Diagram's diagram_url]"
3  frameborder="0"
4  style="width:100%;height:500px;"
5  allowfullscreen>
6</iframe>

This step is only relevant if you have a Lucidchart Team or Enterprise plan and need to programmatically list diagrams in your workspace — for example, building a searchable diagram directory. Install the API Connector plugin if not already installed: Plugins tab → Add plugins → 'API Connector' → Install. Click API Connector → Add another API → name it 'Lucidchart'. In Shared Headers: - Key: Authorization, Value: Bearer YOUR_OAUTH_TOKEN, Private: checked - Key: Lucid-Api-Version, Value: 1, Private: unchecked The OAuth Bearer token for Lucidchart API v1 is obtained via Lucidchart's OAuth 2.0 flow — this is more complex than a simple personal access token. Lucidchart uses a standard OAuth 2.0 Authorization Code flow: you register an application in Lucidchart's developer portal, obtain a client_id and client_secret, redirect your user to Lucidchart's authorization URL, receive an authorization code, and exchange it for an access_token via a token endpoint. For Bubble apps, the simplest approach is to use a Backend Workflow to handle the OAuth token exchange server-side (paid Bubble plan required). Store the access_token in your User data type and use it in subsequent API Connector calls. For internal tools where all API calls use the same account, you can generate a long-lived token manually from Lucidchart's developer tools and paste it as a static Private header value — check Lucidchart's developer documentation for whether personal access tokens (non-OAuth) are available on your plan. Document list call: Add a call named 'Get Documents'. Method: GET. URL: https://api.lucid.app/v1/documents. Optional params: - product: lucidchart (filter to Lucidchart only, vs Lucidspark) - Search params vary by API version — check current Lucidchart API documentation. Set 'Use as' to 'Data'. Initialize call — Bubble detects the document list with fields like documentId, title, modifiedTime, editUrl, embedUrl. Use the embedUrl field to dynamically generate iframe HTML in your UI. RapidDev's team can help you architect a diagram browser with OAuth token management for enterprise use cases — book a free scoping call at rapidevelopers.com/contact.

1{
2  "shared_headers": [
3    {
4      "key": "Authorization",
5      "value": "Bearer YOUR_LUCIDCHART_OAUTH_TOKEN",
6      "private": true
7    },
8    {
9      "key": "Lucid-Api-Version",
10      "value": "1",
11      "private": false
12    }
13  ],
14  "call": {
15    "method": "GET",
16    "url": "https://api.lucid.app/v1/documents?product=lucidchart"
17  }
18}

With your embed HTML in place, verify everything works and address the two most common post-setup issues: blank iframes and Bubble privacy considerations. Testing the iframe: preview your Bubble app in the browser. Scroll to the HTML Element where the Lucidchart diagram should appear. If the diagram renders correctly, you are done with the core setup. If the iframe is blank or shows a Lucidchart login page, work through this checklist: 1. Open the embed URL directly in a new browser tab (copy the src value from the iframe HTML and paste it in the address bar). If it shows a login page there too, the sharing setting is still private — go back to Lucidchart → File → Share → change to 'Anyone with the link can view'. 2. If the URL opens correctly in a tab but not in the iframe, check for browser iframe restrictions. Some corporate or educational institutions block iframe embeds with Content-Security-Policy headers. Test in a personal browser profile. 3. Confirm the embed URL uses the /embeddedchart/ path — not just the shareable view URL or the editor URL. Privacy considerations: be aware that 'Anyone with the link can view' means any user who views your Bubble app's page source or network requests can extract the iframe src URL and share it externally. If your diagrams contain sensitive internal information: - Consider adding a watermark or identifying text in the diagram - Use Lucidchart's organization-level sharing ('Anyone in my organization') if all your Bubble users belong to the same Lucidchart organization - Accept that completely private diagrams cannot be embedded in external apps without a login wall For Bubble Privacy rules: if you store embed URLs in a Bubble database Diagram type, go to Data → Privacy → set a rule on the Diagram type: 'When User is logged in' (or has the appropriate role) to prevent the list of diagram URLs from being queryable by anonymous users through Bubble's built-in Data API.