Runtime settings for the Micrio viewer Client 5.x
INFO
This page is about the Micrio client version 5. Use the links below to navigate to alternative versions.
The Micrio viewer offers a lot of embedding customization options, allowing you to adjust the behavior.
HTML attributes
You can specify options as attributes using the <micr-io> element.
| Attribute | Type | Default value | Description |
|---|---|---|---|
| |||
lang | string | en | The data language code to use |
data-path | string | Based on image | For custom hosted Micrio images, specify the root URL like this |
data-inittype | string | - | Set this to cover to start the image using the full viewport |
data-coverlimit | boolean | - | The user cannot zoom out further than the full viewport, possibly not being able to view the entire image at once |
lazyload | boolean | false | Set this to true to only start loading the image when it's been scrolled into the user's view, in case it's lower in a webpage. |
data-skipmeta | boolean | false | Do not load any metadata (markers, tours, etc) |
data-static | boolean | false | Simulate an <img/> element. No logo, loaderbar, and no event listeners |
data-router | string | null | Read and write deeplinks to opened tours and markers. Options are hash for hash-based routing, and static for using the real URL path (advanced use, for SSR) |
data-gtag | boolean | true | If you are using Google Analytics in your site, by default Micrio will send user input as GA Events. Set this to false to prevent that. More info |
| |||
data-camspeed | number | 1 | Set the speed factor for camera animations |
data-freemove | boolean | false | Can pan outside the image's limits |
data-zoomlimit | number | 1 | Set this to the percentage (1=100%) of how far a user can zoom in to the image |
data-view | Array<number> | 0,0,1,1 | Set the initial viewport rectangle of the image (x0, y0, x1, y1 with coordinates as fractions) |
data-focus | Array<number> | 0.5,0.5 | Set focus point of the image, which is treated as the center in case of image overflows (x, y with coordinates as fractions) |
data-keeprendering | boolean | false | Keep drawing frames, even if there is no movement. Use only when you need this. |
data-normalize-dpr | boolean | true | When turned off, high DPI screens will have its zoom limited to visually 100% of pixel size, instead of corrected for the pixel density, resulting in being able to zoom in less (but the image will always be sharp) |
| |||
data-events | boolean | true | If set to false, no event handlers will be set up and the image will be non-interactive |
data-keys | boolean | false | If set to true, you can use your keyboard to navigate through the image |
data-pinch-zoom | boolean | true | Use trackpad/touchscreen pinching for zooming |
data-scroll-zoom | boolean | true | Use mousewheel/trackpad scrolling for zooming |
data-control-zoom | boolean | false | The user must press CTRL/CMD when zooming with the mousewheel |
data-two-finger-pan | boolean | false | Requires the user to use two fingers to pan the image on touch devices |
data-zooming | boolean | true | If set to false the user cannot zoom at all |
data-dragging | boolean | true | Use dragging and touch events for panning |
| |||
data-ui | boolean | true | When set to false, no HTML UI elements will be printed |
data-controls | boolean | true | When set to false, no control buttons will be printed |
data-fullscreen | boolean | true | Show a fullscreen switching buttons on platforms that support it |
data-social | boolean | false | Show a social sharing link menu |
data-logo | boolean | true | When set to false, the Micrio logo will be hidden |
data-logo-org | boolean | true | When set to false, the optional Organisation logo (top right) will be hidden |
data-toolbar | boolean | true | When set to false, no top menu bar will be printed |
data-show-info | boolean | false | Show an image info panel with the title and description |
data-minimap | boolean | false | If set to true, an interactive minimap will be shown |
data-minimap-hide | boolean | true | If set to false, the minimap will always be visible |
data-minimap-height | number | 160 | Set the minimap height in pixels |
data-minimap-width | number | 200 | Set the minimap width in pixels |
| |||
muted | boolean | | If this attribute is present, all audio will be disabled |
volume | number | 1 | The general sound volume for music/sfx (between 0 and 1) |
data-mutedvolume | number | 0 | If music was added to the image, fade it to this volume while other audio plays (between 0 and 1) |