Embedding your Cacoo diagram in an external webpage

Embedding a single sheet

Embedding the whole diagram

Share your diagram to blog posts, website, or internally used resources by embedding your diagram in a web page.

 

※ Please make sure to save the diagram after editing the diagram if it’s already published externally. The embedded image will not be updated until you save the original diagram.

 

Embedding a single sheet

Here’s how to embed a single sheet from a diagram.

 

After selecting the sheet that you want to put on your site from the Sheets panel on the right side of the Editor, click the “Share” button and click the “Image Link” tab.

 

If you’re sharing the sheet to a public internet page where you want users to be able to click through to the diagram, change the viewing settings to “Anyone with the link can view.” This is not necessary if you’re sharing to a private page where you’ve already specified the shared users on Cacoo, or if just viewing the file on the page is permissible.

  

 

Then, click “Copy link.”

 

When you see "Copied.", pop up in the right-hand corner, that means that the image URL has been copied to your clipboard.

 

All you need to do is add the <img> tag on your site's HTML and specify the URL you just copied in src.

 

<img src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN-5BBE5.png[a]">

 

Now, the image will be shown on your site.

 

Embedding the whole diagram

 

To share the whole diagram, click “Share,” then click the “Embed” tab.

 

If you’re sharing the sheet to a public internet page where you want users to be able to click through to the diagram, change the viewing settings to “Anyone with the link can view.” This is not necessary if you’re sharing to a private page where you’ve already specified the shared users on Cacoo, or if just viewing the file on the page is permissible.

 

 

Then, click “Copy tag.” When you see "Copied.", pop up in the right-hand corner, that means that the iframe tag for the diagram has been copied to your clipboard.

 

The viewer has navigation buttons (◀▶) so that you can switch sheets.

Paste the link into the HTML for your webpage.

 

<iframe src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN/view" width="402" height="330" frameborder="0" scrolling="no"></iframe>

 

The diagram will be embedded on your webpage. The default size of the viewer is set 400x300, but you can change this by switching on “Image resolution.”

 

When you change one of the two px fields, the other field will change accordingly. To unlock embedded diagram dimensions, click the lock icon to unlock it

 

Your tag will change to reflect the new diagram size.

 

<iframe src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN/view?w=600&h=500&sn=2" width="602" height="530" frameborder="0" scrolling="no"></iframe>

 

 

Information on embedding your diagram on Cacoo versions before 6/27/18: https://support.cacoo.com/hc/en-us/articles/207194718-Embedding-your-Cacoo-diagram-in-an-external-webpage