How to embed a mind map into your website as a widget?
06 october 2021
You can embed maps on your website.
Example
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://ioctopus.online/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 menubarpanelMain=0
- remove main barpanelThemes=0
- remove theme barpanelIcons=0
- remove icon barpanelIcons=open
- force the icon bar to open (for shared as editable)panelColors=0
- remove color barpanelColors=open
- force the color bar to open (for shared as editable)freezePanels=1
- prohibit opening/closing barsroundedPanels=1
- rounded corners on barsscrollable=0
- turn off map scrollingisolate=1
- users will each edit a different version of your file, otherwise users will edit the same fileplatformMask=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>
Share
See also
What are mind map script for?
To create unique functionality. For example:
- Inserting current date
- Insertion of synonyms
- And anything else you need
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