« For Developers: Embedding, JS, APIs
OLD VERSION WARNING: This tutorial is for the legacy Micrio version 3.x. To see the most up to date version, visit this page.
After creating a Micrio embed in your website using a
NOTE: This article does not apply to
<iframe> Micrio embeds.
For older Micrio versions (pre-3.2), check out the older JS APIs.
Accessing the Micrio JS instance
You can access a Micrio JS instance by reading the
.micrio property of the Micrio HTML element (
const micrioInstance = document.getElementById('your-micrio-id').micrio;
From there on, you can continue with these topics:
JS Events API
Read and control everything that happens with your image.
JS Events: Lifecycle
The Micrio instance lifecycle and load events, from first init to the removal, giving you full knowledge of the element's state.
JS Developer API
The Micrio JS client is fully documented using JSDoc, and has auto-generated documentation pages of the entire client API. See the JSDoc API documentation here!
This contains several modules you can control, for instance:
Micrio: The main Micrio JS class
Micrio.Camera: The virtual camera object, which gives you full control of what the user sees in their screen, including a bunch of animations.
Micrio.Camera.Events: Set or remove specific event listeners, such as touch and keyboard events, or behavior specific events such as pinch to zoom, and two-finger pan.
Micrio.Modules: The main Micrio module controller that contains:
- Marker Tours for in-depth control of Marker Tours
- Video tours for playing pre-programmed video tours
- Markers for controlling individual markers
- The Audio controller for positional audio and music
- Internal image navigator for navigating through Micrio images within the same element
API Workspace integration
For TypeScript project integrations (and neat VS Code autocompletion), you can use this
.d.ts reference file: https://b.micr.io/micrio-3.3.min.d.ts!
You can view the Micrio general change logs here.