Embedding your Cacoo diagram in an external webpage

To let others see your diagram, you need to make it public first. Click the "Properties" tab on the Editor menu.

In the middle of the Diagram Properties panel, you'll see the "Security" setting. Check the box next to "Open diagram to public by URL" and press the "Update" button at the bottom.

Properties_Menu.png

※ 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.

Then go back to the Diagram Viewer and click the “Share URL” button:

 Diagram_Viewer_Share_URL.png

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 list on the left side of the Diagram Viewer, please click the "Copy" button located in "Sheet image" section.

When you see "copied!", the URL for the image 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">

Now, the image will be shown on your site.

Embedding the whole diagram

Here is how to show the entire whole viewer:

The viewer has navigation buttons (◀▶) so that you can switch sheets. It'll be better to use the viewer when you have many sheets.

Just as you did above, click the "Share URL" button on the diagram details page and copy the code by clicking the "Copy" button in "Embed view" section this time.

 

Paste the link to html.

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

 

 

You'll have the viewer on your site. The default size of the viewer is set 400x300.

Change the setting so that it will be slightly larger (600x500) and show the second sheet by default by editing the HTML code.

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

The yellow part shows where it's been changed. I've added "w" and "h" parameters to the URL to specify the size of the diagram. The "sn" parameter specifies the sheet number which will be shown at first. Enter the numbers which are w+2 for width and h+30 for height. In this case, width is 500+2 and height is 600+30.