Diagramming Basics

Follow New post
0

How can I embed a diagram into a blog or website?

Answered

Official comment

Avatar

Embedding allows you to put your Lucidchart creations directly into your webpage, where they will be available with a number of viewing options including zoom functionality, fullscreen mode, and the ability to look through the pages of a document.  Steps to embed are similar to embedding a Youtube video and can be found below.

Embed a diagram

  1. Click ‘Share’ in the top menu

  2. Select ‘Embed’ from the list of options

  3. Select a pre-set size for the diagram or create a custom size

  4. Press the blue "Activate Embed Code"
  5. Copy and paste the generated html text directly into your website

 Embed In Google Sites

  1. Edit the page that you want to embed the diagram on

edit_sites.png

2. Inside the editor, click the HTML button to edit the page with HTML code

HTML_embed.png

3. Paste the embed code from Lucidchart into the HTML text area and click the Update button

paste_html.png

4. While still inside the editor you will not see the embedded diagram, instead you see a 'Google Gadget' placeholder. Once you save the page, the embedded diagram will appear. 

edit_stie_view.png

Comment actions Permalink

11 comments

0
Avatar

What can I do if all of the pages in my chart do not show up? I have a 4 page chart, and only the first page is embedding.

Rose S 0 votes
Comment actions Permalink
0
Avatar

Hi Rose,

Sounds like a bug! Would you mind sending us screenshots and more details about what is happening to support@lucidchart.com and we will do our best to help you out!

Hayden N 0 votes
Comment actions Permalink
0
Avatar

Yep. I copied all of my charts to a new document, and it embedded in my site with the tabs. It was a bug with that document. 

Rose S 0 votes
Comment actions Permalink
0
Avatar

I have embedded a Lucidchart into my blogger. The words from that post have spilled off the page and overlapped across the post underneath this new post. 

What can I do to correct this problem??

Philip W 0 votes
Comment actions Permalink
0
Avatar

Hi Philip! Thanks for reaching out in the community. I have created a support ticket from this post and I will reach out to via email to help you resolve this issue.

UPDATE:

In the code that appears when you go to the embed option in Lucidchart, it has the dimensions of the iframe in it that you can alter if that is messing with the size/positioning of your blog.

Beyond that there may not be anything we can do from the Lucidchart side of things. This may be an issue involving how you have the spacing of your webpage set up.

Maison W 0 votes
Comment actions Permalink
0
Avatar

Hi 

Is it possible to have an embedded chart in Google Sites

a) without a border 

b) the ability to pre-set the 'show tabs' option to off

b) without giving page viewers the possibility to edit the chart?

Many thanks for your help.

brian.keyes 0 votes
Comment actions Permalink
0
Avatar

Hi Brian! If by the border you are referring to the iFrame, there isn't a way to get rid of this when embedding. Additionally you can't get rid of the page tabs. But as far as editing access goes, other users visiting this site shouldn't be able to edit the diagrams. If someone other than you visits the published site, does the edit option still show up for them? If this is the case please fill out this form to submit a support ticket and we'd be happy to see what could be going on. Please include the Lucidchart URL of the embedded document as well as the URL of the published Google Site. Thanks and hope this helps!

Maison W 0 votes
Comment actions Permalink
0
Avatar

Thank you Maison

Pity about the iFrame and page tabs; in my opinion they are a distraction to the the user experience, but hey.   

Great that the users can't edit, makes sense. Unfortunately, I hadn't got as far as releasing the proof of concept to other users (Sorry!)

Best

Brian

brian.keyes 0 votes
Comment actions Permalink
0
Avatar

Revisiting this, the embed is actually a bit unsightly and unprofessional looking, it takes away from a well-designed chart. What is the recommended way to deploy a chart on the web so it is perfect to scale and the links are active? Thanks

info 0 votes
Comment actions Permalink
0
Avatar

Hi there,

Thanks for reaching out on the community. To finalize your document, you can publish your document or embed it (learn how here). However, if you do not like the design of the publish or embed options, there are not many ways to customize or modify them, so you may be interested in downloading your document as a PDF, and then providing a way for your viewers to access it. You can learn how to do this here. Keep in mind that when exporting, publishing, or presenting a diagram that contains a link, in some cases the link may be disabled. If you are presenting, every type of link will remain active. If you are publishing as a URL or PDF only external links and links to email will function. Similarly, for downloading as a PDF only external links or links to email will remain active. With all other forms of exporting and publishing links will not function. Hope this helps!

Abby S 0 votes
Comment actions Permalink
Please sign in to leave a comment.