« For Developers: Embedding, JS, APIs

Micrio JS Events API

A powerful Micrio feature is reading user and lifecycle events.

To fully integrate the Micrio client into your website, you can use the Events API to hook to internal and user actions.

HTML Events vs JS instance events

Most of the regular Events fire on the <micr-io> HTML element itself. So for instance, if you want to listen to a marker-opened event, you can do this:

// Your HTML element reference
const image = document.querySelector('micr-io');

// Add the event listener
image.addEventListener('marker-opened', e => {
	console.log('Marker was opened!', e.detail);
});

Micrio instance specific events

Because of a high firing frequency of some events, not all do not fire on the HTML element, but on the Micrio JS instance. This is done for performance reasons.

An example of this is the draw event, which fires for each frame that is drawn. To read this event, you need to add the event listener to the JS instance instead of the HTML element. The addEventListener API's behavior is exactly the same:

// Your Micrio instance reference (HTMLElement.micrio property)
const micrioInstance = document.getElementByTagName('micr-io').micrio;

// Add the event listener
micrioInstance.addEventListener('draw', e => {
  // e.detail is the Micrio instance itself
	console.log('A frame was drawn!', e.detail);
});

List of event

Below is a full list of possible events to listen to. Some events only fire on the Javascript Micrio instance, due to the high event volume.

Event name evt.detail value Fires on HTML element Description

General

metadata Micrio instance Fires when the image data (markers, tours, audio) has been loaded
ready Micrio instance Fires when the Micrio instance has been created and is ready to print
settings JSON Allows you to change the downloaded image settings before parsing
placed Micrio instance Fires when the <canvas> element has been placed in the DOM
loaded Micrio instance The image is fully loaded and ready to start rendering
drawn Micrio instance Fires when the first frame was succesfully drawn
show Micrio instance The Micrio image is loaded and fully shown
hide Micrio instance The Micrio image is hidden

Camera events

zoom Micrio instance The camera has zoomed
move Micrio instance The camera has moved
draw Micrio instance A frame has been drawn

Markers

marker-open Marker instance A marker has been opened and the camera animation is starting
marker-opened Marker instance A marker has been fully opened and the camera is done, and popup shown
marker-close Marker instance A marker starts closing
marker-closed Marker instance A marker has been succesfully closed

Tours

markerTours-start MarkerTour instance A marker tour has been succesfully started
markerTours-step MarkerTour instance Fires for each marker step in a marker tour
markerTours-stop MarkerTour instance A marker tour has been succesfully stopped
markerScrollTours-start MarkerScrollTour instance A marker scrolling tour has been succesfully started
markerScrollTours-stop MarkerScrollTour instance A marker scrolling tour has been succesfully stopped
tours-start Tour instance A video tour has been succesfully started
tours-stop Tour instance A video tour has been succesfully stopped
tour-event TourEvent instance When a video tour has custom events, they will be fired like this

Audio / video

no-autoplay-audio Micrio instance Autoplay audio has been blocked by the browser
autoplay-blocked Micrio instance Fires when there is autoplay audio or video which was disallowed by the browser
can-play-audio Micrio instance Audio has been succesfully instantiated and can be played freely
audio-mute Micrio instance The audio has been muted
audio-unmute Micrio instance The audio has been unmuted

Special cases

update Array<event-types> When there is any user action, this event fires. This event is deferred and will fire at a maximum rate of every 200ms. The evt.details is an array of event types fired within the interval.
✉ Can't find what you're looking for? Contact us!