How to embed a mind map into your website as a widget?

06 october 2021

You can embed maps on your website.

Example

Mind map moving

Try here to move the platform or minimize branches:

Manual

The code builder is currently under development. However, you can make the code manually.

To do this:

1. Create a mind map and share it

You can create a mind map at this link: https://ivvi.dev/new

2. Copy the link into notepad and add the required parameters to it

For example:

https://ioctopus.online/____Widget__read-only____ae06464c14af8a4449d1bac198678ba1?panelMain=0&menubar=0&freezePanels=1&scrollable=0

Please note

  • A link is followed by ? then the parameters
  • Parameters are separated by a sign &

Available options

  • menubar=0 - remove menubar
  • panelMain=0 - remove main bar
  • panelThemes=0 - remove theme bar
  • panelIcons=0 - remove icon bar
  • panelIcons=open - force the icon bar to open (for shared as editable)
  • panelColors=0 - remove color bar
  • panelColors=open - force the color bar to open (for shared as editable)
  • freezePanels=1 - prohibit opening/closing bars
  • roundedPanels=1 - rounded corners on bars
  • scrollable=0 - turn off map scrolling
  • isolate=1 - users will each edit a different version of your file, otherwise users will edit the same file
  • platformMask=IMAGE_URL - a mask that can be used to trim the map. Example of a picture mask, Example of a cropped mind map.

 

3. Insert the link in a <iframe> tag and place it on your website

Tag template:

<iframe
	width="100%"
	height="500"
	border="0"
	scrolling="no"
	style="border: none;"
	src="THE_LINK"
></iframe>

Where THE_LINK - is a link you made in notepad.

For example:

<iframe
	width="100%"
	height="500"
	border="0"
	scrolling="no"
	style="border: none;"
	src="https://ioctopus.online/____How_to_make_a_mind_map__editable____b5f8cb61b9742e7723e635a7e4d23e57?menubar=0&panelMain=0&panelThemes=0&panelIcons=0&panelColors=open&freezePanels=1&isolate=1&scrollable=0&roundedPanels=1&platformMask=https://ioctopus.online/wp-content/themes/app/blog/how-to-make-a-mind-map/mask4.svg"
></iframe>

Author of the article: Roman M.

Share

See also

Mind Maps Scripts

What are mind map script for?

To create unique functionality. For example:

  • Inserting current date
  • Insertion of synonyms
  • And anything else you need

Unobvious in IOctopus

When it makes sense, we break the design rule: "everything should be obvious in the interface". But what would be the point of that?

Comments