« Getting started with Micrio
Embedding Micrio in your own website
Using the <micr-io> HTML tag
<micr-io> element inside your HTML pages.
Embedding Micrio images directly into your website is as easy as using
Then, you can simply add custom
<micr-io id="[your image ID]"> elements in your HTML, which will be automatically loaded:
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.
For advanced users: Custom options for
How to find your image ID
In 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.
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:
<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
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.
Read your platform's developer documentation closely for more information.
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.
Read the developer documentation closely for more information.