+1We retrieve a sharable link from the API:
https://api.lucid.co/documents/document_id/shares/shareLinks
which provides a shared link like:
https://lucid.app/lucidchart/document/edit?invitationId=inv_id
However, when trying to embed this link in an <iframe> within our application, it does not load due to restrictions.
Question:
How can we embed this URL within our own application without opening it in a new browser tab?
Best answer by alec.bingham
I’m personally more familiar with the token-based embed, so here are some tips/screenshots for the token based embed. If the cookie-based embed is better for your use case, I can find some tips for that as well. For now, if you are using the token based embed, the first thing you should see as you load the iframe is a Lucid Document Picker, which will look something like this:
Once you navigate to the document you want to embed, you can select it and see a screen like this:
Here is where you configure the embed as editable, comment only, or view only. Click “Insert” once you have selected the access level you want for the embed. The embed will then load up your document in a lucid editor:
Hope this helps!
+18Hi
You are correct… currently, Lucidchart does not support embedding editable documents directly within third-party applications via <iframe>.
However, here are a few alternative options depending on your use case:
Published View Embeds
You can use the "Publish Link" feature to generate an iframe-compatible view-only URL.
This is accessible from the document UI or via the API
The resulting link will work inside an <iframe> and is ideal for display-only purposes.
Redirect to New Tab (Current Share Link)
If real-time editing is essential, the current approach is to launch the Lucidchart editor in a new browser tab using the invitation link, as this ensures full functionality while maintaining platform security.
I hope this helps.
Hey
s response. Lucid DOES support editable embeds, but not through use of share links. Here is a link to our documentation about embedding Lucid documents in other applications/pages. There are 2 main types of embed that Lucid supports: cookie based or token based, and both of these can be configured to be editable or view only embeds.
Take a look at the documentation I provided, hopefully it can guide you through embedding Lucid documents for your use case, but please reach back out if you have any more questions/concerns!
+1Hey
Thanks for the solution! It allows opening Lucidchart in an iframe.
I have tried both methods—cookie-based and token-based—but in the iframe, it only allows view access, not edit.
How can we achieve edit access in the iframe?
I’m personally more familiar with the token-based embed, so here are some tips/screenshots for the token based embed. If the cookie-based embed is better for your use case, I can find some tips for that as well. For now, if you are using the token based embed, the first thing you should see as you load the iframe is a Lucid Document Picker, which will look something like this:
Once you navigate to the document you want to embed, you can select it and see a screen like this:
Here is where you configure the embed as editable, comment only, or view only. Click “Insert” once you have selected the access level you want for the embed. The embed will then load up your document in a lucid editor:
Hope this helps!
+1Hello
Thanks for the answer.
My requirement is as follows:
We have records for each project, and a button labeled "ADD TO CHART" on top of the records.
Using an API, we generate a chart when the user clicks on this button.
When the user clicks on the "Project Chart" menu, we want to display the generated chart with edit access—without leaving the application.
The chart should be displayed without requiring manual document selection, ensuring that the user only sees their own document, not others.
Additionally, the user should be able to download the chart as a PDF.
Is there any workaround for this?
CC
Sounds like you want the Cookie based embeds, and not the token based ones. Refer back to the documentation I sent you originally, it also links to a helpful example cookie embed that you can find here.
You should be able to save the document URL that you get back in the response object after you create the new chart via the API, which you can then use in the Cookie based embed flow.
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to create an account.
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to log in.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
