Embedding your Cacoo diagram in an external webpage

Share your diagram in blog posts, websites, or internally used resources by embedding your diagram in a web page. In Cacoo, you can choose to embed a single sheet from the diagram or embed the entire diagram. 

Embedding a sheet with image link

To embed a single sheet from a diagram with an image link:

  1. On the diagram, select the Share button on the top right navigation.
  2. Select the Share via link tab, enable the Public link radio button and select view only. The diagram will be available for anyone to view using the link.
    *If you’ve already shared access to the diagram with specified collaborators on the Cacoo folder, you can disable the Public link radio button.
  3. On the Image link & embed code section, click on the drop-down menu and select the sheet you want to generate the image link for, and select the Generate button. 
  4. Select Copy beside the “Image link” field to copy the image link URL. 

Note: By enabling the Public Link function with the permission set, persons who are not members of your Cacoo Space/Organization will be able to view or edit the diagram with the diagram link.
While using the image link, it permits viewers to view the sheet only as an image without access to the diagram. 

 

Tip: Add the <img> tag to your website's HTML and specify the copied URL as src. The image will be displayed on your website.

 

Embedding the whole diagram with embed code

To share the whole diagram, embed the whole diagram using the embed code.

  1. On the diagram, select the Share button on the top right navigation.
  2. Select Share via link tab. If you’re sharing the diagram to an external webpage where you want users to be able to click through the embed diagram, enable the Public link radio button and select view only. The diagram will be available for anyone to view.
    *This is not necessary if you’re sharing to a private page and you’ve already specified the collaborators who can access the diagram on Cacoo.
  3. On the Image link & embed code section, click on the drop-down menu and select the sheet you want to appear as the first sheet when embedding the diagram on the page and select the Generate button. 
  4. Select Copy from the “Embed code” field to copy the iframe tag and code. 

Tip: The embedded diagram will display in a 400x300 viewer with navigation buttons (◀▶) that let the viewers switch sheets.

 

Changing the size of the embedded image or diagram viewer

You can change the size of the embedded image and diagram viewer to any size.

  1. Check the box next to the ratio field and specify the width and height in pixels (px).  
  2. After specifying the ratio, select Generate, and the size you specified will be generated in the image link and embed code.

If the width-to-height ratio is locked, changing either height or width will affect the other. If you want to unlock it, click on the icon between width and height.

Note: If the image or diagram has been embedded on the webpage, changing its size ratio in the Cacoo diagram will not apply the changes to the image/diagram on the external webpage. You will need to generate and copy the embed code again before pasting it on the external page.