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

07 october 2021

You can embed maps on your website, such as on this page https://ioctopus.online/how-to-make-a-mind-map

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

To do this:

1. Create a link to the map

(to view or edit)

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=open=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/____What_Are_Mind_Maps__editable____aaa64074d598497ccf61bbf20f00e43b?menubar=0&amp;panelMain=0&amp;panelThemes=0&amp;panelIcons=0&amp;panelColors=open&amp;freezePanels=1&amp;isolate=1&amp;scrollable=0&amp;roundedPanels=1&amp;platformMask=https://ioctopus.online/wp-content/themes/app/blog/how-to-make-a-mind-map/mask4.svg"
></iframe>

After this, an interactive map will appear on your website. Like this:

See also

Hidden functions

It's time to talk about features that are on IOctopus but that few people know about.

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

Share

Comment