# Lucidchart
- Tool: Bubble
- Difficulty: Beginner
- Time required: 30 minutes (embed) or 2–3 hours (API)
- Last updated: July 2026
## TL;DR
Connect Bubble to Lucidchart primarily by embedding published diagrams via an iframe in a Bubble HTML Element — no API key required, works on free plans of both tools. For a searchable diagram index, use the Lucidchart API v1 with a Bearer token (Private) in the API Connector, available only on Team or Enterprise plans. The iframe embed covers 95% of use cases.
## The Right Lucidchart Integration for Bubble Is Probably Not What You Think
When Bubble developers search for a 'Lucidchart integration', they usually want to display diagrams in their Bubble app — process flows for onboarding screens, org charts for company directories, architecture diagrams for technical documentation portals. The instinct is to look for an API.
The correct approach for almost every one of these cases is an iframe, not an API. Lucidchart publishes each diagram to a shareable embed URL that any webpage — including a Bubble HTML Element — can render in an iframe. You do not need a token, a paid plan, or any backend setup. The diagram renders from Lucidchart's servers in the browser.
This matters because the iframe path is dramatically simpler: paste one HTML tag into a Bubble HTML Element, set the Lucidchart sharing to 'Anyone with the link can view', and the diagram appears. The entire integration takes under five minutes. This works on the free tier of both Lucidchart (up to 3 editable documents) and Bubble.
The Lucidchart API (at https://api.lucid.app/v1) is a separate, gated feature for building tools that programmatically list and search documents in a Lucidchart workspace. It requires OAuth 2.0 authentication and a Team or Enterprise Lucidchart plan. You only need this if you are building a diagram directory where users can browse all diagrams without knowing the embed URLs in advance.
The most important gotcha with the iframe approach is sharing settings. If the diagram is set to 'Private' or 'Only people invited can view', the iframe will show a blank white box or a Lucidchart login prompt instead of the diagram — even for your own Bubble users. Sharing must be set to at least 'Anyone with the link can view'.
For sensitive diagrams containing internal system architecture or confidential processes, this is a real consideration: changing sharing to 'Anyone with the link' means the embed URL can be shared outside your Bubble app. For most use cases — onboarding flows, public process documentation — this is not a problem.
## Before you start
- A Lucidchart account (free plan supports up to 3 editable documents and allows embedding; Team plan required for API access)
- A diagram you want to embed — created and saved in Lucidchart
- A Bubble app — no plugins required for the iframe embed; API Connector plugin needed only for the Team+ document listing feature
- For the API path: a Lucidchart Team or Enterprise plan and an OAuth 2.0 access token
## Step-by-step guide
### 1. Publish Your Lucidchart Diagram and Copy the Embed URL
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:
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.
**Expected result:** You have the full iframe embed URL for your diagram (https://lucid.app/documents/embeddedchart/YOUR_DOCUMENT_ID) and the diagram sharing is set to 'Anyone with the link can view'.
### 2. Add the Lucidchart Diagram to a Bubble HTML Element
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:
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.
```
```
**Expected result:** Your Lucidchart diagram renders inside the Bubble HTML Element on your page. The diagram is interactive (users can pan and zoom within the iframe). The correct diagram is visible without any login prompt.
### 3. Store Multiple Diagrams Dynamically in Bubble's Database
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:
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.
```
```
**Expected result:** A Bubble Repeating Group displays a list of diagram names, and clicking one (or viewing it in a cell) shows the corresponding Lucidchart diagram embedded in an iframe. Swapping records shows different diagrams.
### 4. (Team+ Plans Only) Configure API Connector for Diagram Document Listing
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.
```
{
"shared_headers": [
{
"key": "Authorization",
"value": "Bearer YOUR_LUCIDCHART_OAUTH_TOKEN",
"private": true
},
{
"key": "Lucid-Api-Version",
"value": "1",
"private": false
}
],
"call": {
"method": "GET",
"url": "https://api.lucid.app/v1/documents?product=lucidchart"
}
}
```
**Expected result:** The Lucidchart API Connector group is configured with Bearer token (Private) and Lucid-Api-Version headers. The 'Get Documents' call initializes and Bubble detects a document list with embedUrl fields you can bind to dynamic iframe HTML in a Repeating Group.
### 5. Test the Embed, Handle Blank Iframes, and Apply Privacy Rules
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.
**Expected result:** The Lucidchart diagram renders correctly in your Bubble app. Privacy rules are applied to the Diagram data type if relevant. You understand the sharing implications and have made a deliberate decision about the sharing level for your diagrams.
## Best practices
- Default to the iframe embed pattern — it requires no API key, works on free Lucidchart and free Bubble plans, and covers 95% of diagram display use cases without backend complexity.
- Always set Lucidchart diagram sharing to 'Anyone with the link can view' before embedding — do not leave it on Private and expect the embed to work; this is the most common setup mistake.
- Use the /embeddedchart/ URL path for iframes, not the standard share URL or the editor URL — the embedded chart URL is the only path that renders the diagram in an iframe without headers, navigation, and editor chrome.
- Store multiple diagram embed URLs in a Bubble database Diagram type rather than hardcoding them in HTML Elements — this lets your content team update diagrams in Lucidchart and manage the embed URL list in Bubble's data editor without code changes.
- Apply Bubble Privacy rules to any data type that stores Lucidchart embed URLs — even though the diagram itself is public on Lucidchart's servers, the list of URLs in your database should be access-controlled so only authorized users can discover and open diagrams.
- For sensitive architecture or internal process diagrams, consider whether 'Anyone with the link' sharing is acceptable — if not, the only fully private option is restricting to 'Anyone in my Lucidchart organization', which requires all Bubble app users to have a Lucidchart org account.
- Size the Bubble HTML Element generously — Lucidchart diagrams with many shapes need at least 700–800px width to be readable; a too-small HTML Element forces users to pan and zoom extensively.
- Do not use Lucidchart's script-based embed code (window.initLucidEmbedding) in Bubble HTML Elements — JavaScript execution in Bubble's HTML Element is unreliable; use the plain iframe approach exclusively.
## Use cases
### Onboarding and Process Documentation Portal
A Bubble internal tool displays department process flowcharts in an embedded Lucidchart iframe. Each department has a corresponding record in the Bubble database with a diagram_url field. Employees navigate to their department's page and see the current process diagram rendered directly in the app — the diagram can be updated in Lucidchart without changing the Bubble app.
Prompt example:
```
Show me how to structure a Bubble database with a 'Diagram' data type that stores diagram_url and department_name, then bind a Repeating Group's cell HTML Element to dynamically show the correct Lucidchart iframe based on the current cell's diagram_url.
```
### Client Project Architecture Display
An agency's Bubble client portal includes a 'System Architecture' tab for each project. Each project record in Bubble stores the Lucidchart embed URL for the client's architecture diagram. When a client logs in and opens their project, they see their current architecture diagram without needing a Lucidchart account.
Prompt example:
```
Write the HTML for a Lucidchart iframe that is 100% wide and 600px tall, with the embed URL as a dynamic value from the current Bubble page's Project data type's diagram_url field, formatted as a Bubble dynamic text expression.
```
### Knowledge Base Diagram Browser (Team+ Plan)
A Bubble internal knowledge base lets employees search and browse all Lucidchart diagrams in the company workspace by title. The API Connector calls GET /documents from the Lucidchart API to get a list of diagrams, displays them in a searchable Repeating Group, and clicking a diagram renders it in an iframe modal. This requires a Lucidchart Team plan for API access.
Prompt example:
```
Write the Bubble API Connector configuration for Lucidchart GET /documents call using Bearer token in a Private Authorization header, with the Lucid-Api-Version header set to 1, and show what fields the response returns.
```
## Troubleshooting
### The iframe shows a blank white box or a Lucidchart login prompt instead of the diagram
Cause: Lucidchart's sharing setting for this diagram is set to 'Private' or 'Only people invited can view'. The iframe cannot bypass Lucidchart's authentication requirement.
Solution: In Lucidchart, open the diagram → File → Share → change the sharing permission from 'Private' to 'Anyone with the link can view'. Refresh your Bubble preview page after making the change. If the iframe still shows a login prompt, open the embed URL directly in a browser tab to confirm it loads without authentication.
### Lucidchart API returns 403 Forbidden when calling GET /documents
Cause: The Lucidchart API v1 is only available on Team and Enterprise plans. Free and Individual plan users do not have API access regardless of the token.
Solution: Upgrade to Lucidchart Team plan to enable API access, or switch to the iframe embed approach which works on all plans including Free. For most Bubble use cases — displaying diagrams in the app — the iframe embed requires no API access.
### 'There was an issue setting up your call' when initializing the Lucidchart API Connector call
Cause: The Bearer token in the Authorization header is invalid, expired, or the Lucid-Api-Version header is missing. The API returns a non-200 response that Bubble cannot interpret as a schema.
Solution: Verify the Authorization header value starts with 'Bearer ' followed by a valid token, and that the Private checkbox is checked. Confirm the Lucid-Api-Version shared header is set to exactly '1'. If using an OAuth token, check that it has not expired — OAuth access tokens have expiration times and may need to be refreshed.
### The dynamic diagram iframe in the Repeating Group shows the wrong diagram or no diagram
Cause: The dynamic text expression in the Bubble HTML Element is not correctly referencing the current cell's diagram_url field, or the database records have empty diagram_url values.
Solution: Open the HTML Element in the Repeating Group cell → click the HTML editor → confirm the src attribute uses Bubble's dynamic expression (via the Insert Dynamic Data button) pointing to 'Current cell's Diagram's diagram_url'. Go to the App Data tab and verify that the Diagram records have valid non-empty embed URLs populated.
## Frequently asked questions
### Do I need to pay for Lucidchart to embed diagrams in my Bubble app?
No — the iframe embed works on Lucidchart's free plan, which allows up to 3 editable documents. All embedded documents render in Bubble without any Lucidchart plan upgrade. You only need a paid Lucidchart plan (Team or Enterprise) if you want to use the Lucidchart API to programmatically list and search documents.
### Will the embedded diagram update automatically when I edit it in Lucidchart?
Yes — Lucidchart's embed URL always renders the latest saved version of the published diagram. When you edit and save a diagram in Lucidchart, your Bubble app users see the updated version the next time they load the page. You do not need to update the embed URL or redeploy your Bubble app.
### Can I let Bubble users edit the diagram inside the iframe?
No — the iframe embed is view-only. It lets users pan, zoom, and sometimes click interactive elements, but not edit the diagram content. To enable editing, users would need to open the diagram directly in Lucidchart. You could add a 'Edit in Lucidchart' button that opens the Lucidchart editor URL in a new tab.
### Is it safe to show internal process diagrams using 'Anyone with the link can view' sharing?
It depends on how sensitive the content is. 'Anyone with the link' means anyone who has or discovers the embed URL can view the diagram — it is not tied to your Bubble app's authentication. For public-facing process documentation, this is acceptable. For confidential internal architecture or proprietary workflows, consider whether the content is appropriate for link-based sharing or whether you need organization-level access controls.
### What if I have many diagrams and need users to search them — do I need the Lucidchart API?
Yes, for a true searchable diagram browser you need the Lucidchart API v1 (Team+ plan). Alternatively, you can create a Bubble database of Diagram records where your team manually enters diagram names, categories, and embed URLs — this gives you search and filtering within Bubble without needing the API, and works on any Lucidchart plan.
---
Source: https://www.rapidevelopers.com/bubble-integrations/lucidchart
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/lucidchart