V3: Micrio JS Events API

OLD VERSION WARNING: This tutorial is for the legacy Micrio version 3.x. To see the most up to date version, visit this page.

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.querySelector('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.