Micrio Knowledge Base

Appearance

JS API Client 3.x ​

WARNING

This page is about the Micrio client version 3, which is still supported, but is not the latest version. Use the links below to navigate to alternative versions.

After creating a Micrio embed in your website using a <micr-io> embed, you can gain full control over the Micrio image by using the Micrio JavaScript (JS) API.

INFO

This article does not apply to <iframe> Micrio embeds.

Accessing the Micrio JS instance ​

You can access a Micrio JS instance by reading the .micrio property of the Micrio HTML element (<micr-io>):

js
const micrioInstance = document.getElementById('your-micrio-id').micrio;

From there on, you can continue with these topics:

  1. JS Events API

    Read and control everything that happens with your image.

  2. 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.

  3. 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:

TypeScript 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!