2. The Editor
Note: if you're looking for the newer editor v2 documentation, please check HERE.

When you open the editor, you will see your image with a menu bar on top. The menu options are explained one by one below.
2.1. Image menu
2.1.1. Settings
Setting | Description |
---|---|
clusterMarkers |
If set to true , if markers overlap eachother when the user
is zoomed out, they will be combined to a single cluster marker, which,
when clicked, will zoom the camera to the bounding areas of the containing
markers, allowing the user to then choose which marker to open.
|
fullscreen |
If set to true , show a button to toggle fullscreen mode
|
hookEvents |
If set to false , all user image events (swipe, pinch, zoom)
will be disabled. Tours and markers will still work.
|
loaderbar |
If set to true , show a loader bar at the top of the image
when the image is being loaded.
|
markersRestrictToImage |
If set to true , the camera transitions to marker views
will be restricted to the image boundaries.
|
limitToCoverScale |
If set to true , the user cannot zoom out further than
having the entire screen filled
|
minimap |
If checked, show a navigation minimap in the bottom left corner of the image screen |
musicVolume |
If you have added background music to your image, this is the relative volume it will be played on (1=100%) |
mutedVolume |
When audio is being muted when marker or tour audio (ie a voice over) plays, fade all background audio (positional and music) to this volume. |
mutedVolume |
When audio is being muted when marker or tour audio (ie a voice over) plays, fade all background audio (positional and music) to this volume. |
repeatX |
If enabled, your image will be horizontally repeated infinitely |
social |
If enabled, show social sharing buttons on the micr.io-viewer |
zoomLimit |
The factor (1=100%) that users will be able to zoom in maximally. For
instance, if set to 2 , the user will be able to zoom in to
200% of the original image resolution.
|
2.1.1.1 360° specific settings
_360
menu to see these options:
Setting | Description |
---|---|
autoRotate |
When the image is first loaded, do a slow automatic camera rotation until the user has their first interaction. Good for demo mode. |
closeTop |
For 360° images that are haven't got an exact 2:1
ratio, stretch out the images vertically to fill the entire vertical
3d space. Otherwise, black bars will be shown on the top and bottom
of the 360° sphere.
|
orientationControls |
If enabled, the user will be able to use their mobile phone orientation to look around in the image |
2.1.2. Set Start View
When this option is selected, you will see a resizable rectangle overlay over the image. You can set these to the exact view that the image will always be opened on.
2.1.3. Set Description
Select this option to set an option image description, which will appear when you use the https://micr.io/ image viewer to share your image.
2.1.4. Copy data from another image
If you want to copy all data from an existing image (for instance when you've uploaded an updated image), use this option to select the image to copy the already existing data from.
2.1.5. Preview
Use this option to preview any unpublished changes you've made to the image.
2.1.6. Publish
Use this option to publish the current image data to the public. When this is done, all your latest changes and additions to the image data are visible to everyone.
2.2. Custom menus
This is good for adding About or Credits screens without having to make your own HTML document for it. You can make as many nested menus and pages as you need.
2.2.1. Adding a menu
When you click Add main menu in the menu, you are prompted to type a name (for instance "About"). After this, your menu will appear directly under the Custom menus menu:

Under this menu, there are 3 options:
Option | Description |
---|---|
Remove this menu | Removes this menu and all its submenus and pages. |
Add sub menu | Create a submenu under this menu that can have its own subpages and -menus. For instance: About » This image |
Add page | Add a new content page popup directly under this menu. Its details are explained in the next section. |
2.2.2. Adding a content page
Adding a custom page under one of your own menus is very simple. First, enter a title for your page, for instance This Image. Then you will see the following screen:

2.2.2.1. Writing your content
You can write a basic page with custom bold, italic, titles and lists using the markdown language. See a simple example in the image above. Use the preview button to see how this will look.
2.2.2.2. Adding an image
To add your own custom header image to this page, click the Set Image button. This will open the asset manager where you can upload and select an image. Use the preview button to see how this will look.
2.2.2.3. Custom page data
For advanced usage, and for use with custom client embedded integrations, you can enrich each content page with custom JSON. If you click the Custom Page Data menu, this will show a custom JSON editor. Please refer to its documentation for how to use this.
The entered JSON data will be accessible in the client by reading the
micrioInstance.loader.meta
object.
2.2.2.4. Preview, remove, save
These individual buttons speak for themselves. Use Preview to preview your current page edits, Remove to delete this page, and Save to save this page and close the editor.
2.3. Video Tours

2.3.1. Creating a video tour
To create a new video tour, click on New Video Tour under the Video Tours menu. You will then be prompted to enter a name, and then you can start creating!
2.3.2. Setting the Tour duration
The first thing you'll want to do after creating a new video tour, is decide the total duration of the tour. Perhaps you already have a voice-over audio file of 2 minutes, then you should set the duration to 120 (seconds).
You can do this using the Duration input field on the bottom right of the editor interface.
2.3.3. Video Hotspots
The most important part of the video tours are the video hotspots. These are the views the camera will focus on during the tour.
To create a hotspot, click on the Create Video Hotspot button in the interface. This will allow you to drag a new view rectangle in your image. During the creation process, you can freely zoom and navigate through the image, allowing you to precisely set the viewport to your needs.
2.3.4. The Timeline

The timeline bar is the bar at the bottom of the editor interface. With this, you can set the tour viewport order, and camera speeds and durations.
After creating a video hotspot, you will see a new gray block appearing in the time bar. This is the period when the camera has this view focussed, ie doesn't move.
You can adjust the position of the view area by dragging it through the timeline, and you can adjust its duration by dragging the left and right handles of the grey block.
You can also click anywhere on the timeline to make the camera go to the exact viewport of the time you have selected, and drag the time bar around.
2.3.5. Tour Audio
The unique part of a Video Tour is that you can add a single piece of audio that will be played when the tour is running. A single, long voice-over that tells you about what you see during the touring progress is perfect for this.
2.3.6. Previewing your tour
You can preview the tour within the editor by simply pressing the button left of the timeline.
2.3.7. Saving and exiting the tour editor
If you are done editing the current video tour and want to save and return to the main editor interface, click on Done on the top left of your screen.
2.3.8. Deleting the Tour
To remove the current tour from this image, click Remove this tour on the top left of your screen.
2.3.9. Example application
Example: A great example of this (in Dutch) is a tour through the outside architecture of the Rijksmuseum Amsterdam, as made by NTR Schooltv: An interactive video tour of the Rijksmuseum . Click "Start Details" when you've opened it to see a wonderful application.

2.4. Markers
To enter Marker edit mode, click Markers in the top menu bar.

2.4.1. Placing a marker
To add a marker to your image, press the button on the bottom right of the screen, after which you can select where you want your marker to be placed inside the image.
2.4.2. Editing a marker
Once a marker has been placed, you will see the newly added marker with opened popup window, and a dark rectangle placed in the image.
2.4.2.1. View Rectangle
The dark view rectangle is the viewport the camera will fly to when the user has opened this marker. This should contain the part of the image that has the detail that the marker is about.
To change this rectangle, simply click to select it, after which you can move and resize it to your needs.
Hint: Make sure the marker main icon is inside this rectangle, otherwise users won't see the (full) popup window when they have opened the marker. It's always a good idea to place the marker itself in the top left of the rectangle, ensuring the popups are displayed fully on many possible different screen sizes.
2.4.2.2. The Popup
You can easily edit the Popup contents. If you click the title, you can immediately change it.
To edit the main text contents, click the icon to toggle the text editor. In the input field, you can use the markdown language for custom styling and inserting links. When you are done with that, click the icon again to save it.
2.4.2.3. Edit Controls
On the left of the popup, you see a list of icons. These are used to add specialized marker components:
Icon | Description |
---|---|
The main marker icon. You can drag this to move the marker around. | |
Focus the view rectangle of this marker | |
Delete this marker | |
Add an audio file to this marker. Opens an asset picker where you can upload or select an audio file. | |
Add a new image to the marker popup | |
Add custom HTML to the marker, such as a video <iframe> .
Any HTML is accepted!
|
|
Select an image to be embedded inside the image when this marker is opened. This can be a partial image overlay for instance. When the marker is closed, the image is also hidden. | |
Set one or more custom class names for this marker | |
Opens the a JSON editor for custom data added to this marker. See advanced marker options for more info. |
2.4.3. Custom styling and behavior
There are several ways to give them custom styling, icons, and style or place the marker popups differently, for instance giving all marker popups a static position on the screen instead of being relative to the marker icon.
To learn how to use simple CSS and custom JS with markers, please see the Custom CSS Styling and Custom Marker Javascript tutorials on this site.
There are also some built-in advanced marker features, which are used at your own risk. These are documented below.
2.5. Marker Tours
2.5.1. Creating a marker tour
To create a marker tour, select Markers, Tours, and then New marker tour in the top menu. Give it a name, and you're ready to create it!
2.5.2. Editing
This is very straightforward, since a marker tour is nothing more than a sequence of selected markers. Once you've opened or created a tour from the top menu, you see all image markers semi-transparent.
Click on the markers you want inside the tour, and you will see that they turn blue with a number and arrows besides them:

The numbers indicate which step inside the marker tour the markers are. You can change the order of individual steps by clicking the and buttons next to the marker.
If you want to remove a marker from the tour, simply click on the main marker icon again, and it will be removed.
2.5.3. Saving
To save your current changes and return to the main editor, click on Done in the top left of the screen.
2.5.4. Deleting
To delete the current marker tour, click on Remove this tour in the top left of the screen.
2.6. Audio
There are two kinds of audio you can add: positional audio and ambient music. Both are explained in this section.
Hint: for all audio uploads, please use MP3 files, encoded at a web quality bitrate. This is to prevent large downloads. Do not use .RAW, .PCM or .WAV files.
2.6.1. Position Audio
Position Audio allows you to place separate audio samples on specific locations in your image. This results to the user hearing them (in full stereo) when they navigate through those locations in your image.
This is great for ambient audio to add to the experience of your image. Wind audio samples to place in mountains, water audio for water, etc. You can let your imagination run free here.
To activate the editor positional audio mode, open the Positional Audio option under the Audio top menu. All existing positional audio will automatically start playing as it will in the final version.
2.6.1.1. Setting positional audio
To add your own positional audio sample, press the button on the bottom right of the screen. Then the Asset Manager is opened where you can upload new or select existing audio samples.
Once you have selected an audio sample, you will see the audio added in the center of your image like this:

There are several ways to control and place the audio:
- Use the icon to move the sample to the desired position in your image
- Use the icon increase or decrease the area where the audio will be heard
- Use the icon to delete the sample
- Use the volume slider to set the relative audio volume
Hint: The best practise is trial and error with positional audio. Play and move them around until the balance seems best!
2.6.2. Ambient Music
You can upload a selected music track for your image, which will be played on the background, and muted when other audio (of a video tour or marker-- usually voice-overs) will be playing.
Note: You can adjust the main music volume, and the volume it will fade out to in the Main Image Settings.
2.6.2.1. Adding Music
To add a background music track to your image, click the Set Music option under the Audio menu, after which you will be able to upload and select a music file in the Asset Manager.
2.6.2.2. Removing Music
When there is already music selected in your image, click the Remove Music option under the Audio menu.
2.7. The Asset Manager
The interface is almost the same for both images and audio fragments, the only difference is the preview. For simplicity, we use the image asset manager here.
2.7.1. Selecting an existing asset
When the Asset Manager is opened from inside the editor, you will see a screen like this:

To select an existing asset, simply click on the asset you would like to use, and press the Select button.
2.7.2. Adding a new asset
To upload a new file, press the New.. button on the bottom of the form. A new asset item is added with a file selector:

To add a new asset, select a file from your computer, and press Submit to start uploading. Once this has been completed, the file will display as a regular asset in the list, after which you can select to use it.
2.8. Advanced features ⚡
Note: Use these at your own risk! Some of these features will be supported and fully implemented later on. For now, these are still officially unsupported.
2.8.1. Multilingual images
Below the surface, Micrio fully supports multilingual implementations of the editor.
The default language for all images is English (en
)--
you will see this in the URL bar when you have the editor open. For instance:
https://micr.io/editor/#edit/umcjt/en
To enter data for another language, all you have to do is manually change
the last part of the URL (en
) to a different 2-letter language
code, such as nl
. Then the editor will reload with empty data,
and you can enter all content in that language.
2.8.1.1. Multilanguage in the client output
You can easily specify which language the client output should load:
-
In the online micr.io viewer (or an IFRAME embed): the viewing
url will be something like
https://micr.io/i/umcjt/en
. If you have published data for thenl
language, simply change the url tohttps://micr.io/i/umcjt/nl
, and it will use that language's data. -
As a
<micr-io>
embed on your own site: just add the attributelang="nl"
to the HTML tag, like<micr-io lang="nl"></micr-io>
. -
When creating a Micrio instance from JavaScript: simply add
lang: 'nl'
to the Micrio options.
2.8.2. Advanced Marker options
Markers can be used in a large variety of ways. In the Marker Edit Controls, the icon will open a Custom JSON editor for this marker. There, you can enter any data that can be read from the client, allowing for self-made custom actions and data unique to a marker.
However, there are also some pre-programmed JSON fields that trigger built-in functionality:
Field | Type | Description |
---|---|---|
alwaysOpen |
Boolean |
If set to true , this marker will be opened all the time,
and will be unclosable.
|
doJump |
Boolean |
If set to true , when this marker is opened, the camera
will 'jump' to it, by zooming out and then in again when moving
towards this marker's view area.
|
icon |
String | Use a custom icon for this marker, without having to do it using CSS. Click the icon for opening the Asset Manager to upload/select the icon. Note: this field is required to have markers shown in VR mode. |
iconHeight |
Number | Set the marker icon pixel height |
iconWidth |
Number | Set the marker icon pixel width |
imageClickUrl |
String |
When you've added an image to the marker popup, normally when you
click it, the image will be opened in a full screen overlay.
Use this property to set a custom URL that will be opened in an
iframe instead, like a YouTube or Vimeo URL.
|
keepEmbedsOpen |
Boolean | If you've added image embeds to this marker, they will stay placed after you've closed the marker. |
micrioLink |
String | A Micrio Image ID to switch to when this marker is opened. When this field is created, you will notice a small icon appearing on the right, with which you can select to which image the marker should link. |
mute |
Boolean |
If set to true , all positional audio and music will
be faded out when this marker is opened. This is already automatically
done when a marker has custom HTML, but this is to force it.
|
preventImageOpen |
Boolean |
When you've added an image to the marker popup, normally when you
click it, the image will be opened in a full screen overlay.
Set this to true to prevent that.
|
scales |
Boolean |
Normally, marker icons stay the same size whether you are zoomed in
or not. If this field is true , the marker will scale
with the image, making it look like it's a part of the image itself.
|
showInVR |
Boolean |
When set to true , this marker will be shown in VR mode,
only when there's also an icon specified.
|
showTitle |
Boolean |
When set to true , this marker's title will be added
to the marker icon HTML element, so you can use it as an icon
subtitle.
|
staticPopup |
Boolean |
If set to true , this marker popup will have a static
position (ie the top right of the screen), not relative to the
marker position. This is good for mobile interfaces, for instance.
|