Micrio Knowledge Base

Appearance

Embedding Micrio in your own site ​

The latest Micrio version is 4.1.

Embedding a Micrio image or tour on your site is as easy as including the Micrio viewer Javascript, and placing a single <micr-io> element inside your HTML pages.

Using the <micr-io> tag ​

TIP

See this tutorial for a hands-on demo on how to do this.

Embedding Micrio images directly into your website is as easy as using <micr-io> tags.

First, include the JavaScript reference to the Micrio client library in your HTML <head>:

html
<script src="https://b.micr.io/micrio-4.1.min.js"></script>
<script src="https://b.micr.io/micrio-4.1.min.js"></script>

Then, you can simply add custom <micr-io id="[your image ID]"> elements in your HTML, which will be automatically loaded:

html
<micr-io id="JZWvg"></micr-io>
<micr-io id="JZWvg"></micr-io>

Replace the JZWvg by your own image ID.

The result is zoomable.

You can simply style the Micrio elements using CSS to set the desired width and height, including customizing the markers and other interface elements.

Using the <micr-io> tag, you have full control over Micrio's behavior as well, using a rich JavaScript API.

For advanced users: Custom options for <micr-io> elements

How to find your image ID ​

  • From the dashboard image overviews: click on the popout-menu on the image (the three dots in the image tile). At the top in the menu, the image ID will be shown.
  • From the Micrio editor, click preview, and find your image ID in the address bar of your browser.

If you're using Content Security Policy ​

Tech note: if your webserver uses Content Security Policy (CSP) rulesets, in order to be able to run Micrio, add unsafe-eval to the script-src directive. Unfortunately, that is still a requisite in order to run WebAssembly. See this Github issue for more in-depth information.

Using an <iframe> ​

If you prefer to use a more simple approach, using an <iframe> embed tag is the easiest way to embed an image in your page, and works just like embedding any other web resource such as YouTube or Vimeo videos.

Copy and paste this HTML-fragment in your HTML:

html
<iframe src="https://i.micr.io/JZWvg" width="600" height="400" allow="autoplay; fullscreen"></iframe>
<iframe src="https://i.micr.io/JZWvg" width="600" height="400" allow="autoplay; fullscreen"></iframe>

This results in this:

This is a simple way to immediately have results without any custom includes in your site. However, if you have multiple images or want more control over the image or the styling, you will need to use the above <micr-io> tag.

Other methods ​

You can view Micrio images in any other IIIF client viewer. See our IIIF pages for more details.

Embedding Micrio into your Wordpress/Joomla/etc site ​

For embedding into Wordpress/Joomla, the <iframe> solution usually suffices. If not, you might need to adjust the theme or settings of your implementation to make it possible.

Embedding Micrio into your intranet, or your intranet content into Micrio ​

Embedding Intranet content into Micrio will depend on your security settings, and will probably only work if you're implementing the Micrio image as an element, instead of through an iframe.

For more advanced cases, ie. using your own hosting, refer to Custom Hosting pages.