« Getting started with Micrio

Embedding Micrio in your own website

Using an iframe or a custom element

Embedding a Micrio image or tour on your site is a lot like embedding other external content. Just like placing a YouTube video into your site, you can place a line of code in your site to load the Micrio content.

If you want more flexibility and customization options, and you have more coding skills, try using the <micr.io> element instead.

There are two ways of embedding Micrio into your own website

  • With an iframe
  • As an element, this offers more customization options
  1. Using an <iframe>, just like embedding YouTube

    This is the most basic 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>
    

    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, see the next section.

    Replace the "LmnFB" by your own image-ID.

    How to find your image-ID

    Click preview, and find your code in the address-bar of your browser, right behind the /edit/preview/.

  2. Using the <micr-io> element

    For more control over the image, and to add custom CSS, you can embed Micrio images directly into your website. This is as easy as using <micr-io> tags.

    You should include the Javascript reference to the Micrio client library in your HTML <head>:

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

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

    The result is zoomable.

    You can simply style the Micrio elements using CSS to set the desired width and height.

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

  3. 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, an iframe solution usually suffices. If not, you might need to adjust the theme or settings of your implementation to make it possible.

Read the 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.

✉ Can't find what you're looking for? Contact us!