Micrio Knowledge Base

Appearance

Embedding Micrio into your own website Client 4.x ​

This page is about the Micrio client version 4. Use the links below to navigate to alternative versions.

This tutorial takes you step by step to embedding your uploaded Micrio images into your own website, so you can use it as a valuable content component.

To start this tutorial, we're assuming you've already created an account, have created a project, and that you've uploaded your first image. If you haven't done all that yet, follow these steps.

Create your own HTML with the image embedded ​

In order to have your own custom CSS styling and/or scripting, you need to create your own webpage. This can either be an existing webpage or a new one. For more technical details on this, refer to the relevant documentation.

Steps ​

  1. If you already have a webpage to embed it in, you can follow the documentation to embed your newly Micrio image there.

    If you are starting from scratch, you can check out this example page for a minimal HTML page that you can save to your own computer. Or you can copy and paste the source:

    html
    <!DOCTYPE html>
<html>
		<head>
				<title>My Micrio embed</title>
				<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">

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

				<style>
						html, body {
								height: 100%;
								margin: 0;
						}
						micr-io {
								width: 100%;
								height: 100%;
						}
				</style>

		</head>
		<body>
				<micr-io id="umcjt"></micr-io>
		</body>
</html>
    <!DOCTYPE html>
<html>
		<head>
				<title>My Micrio embed</title>
				<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">

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

				<style>
						html, body {
								height: 100%;
								margin: 0;
						}
						micr-io {
								width: 100%;
								height: 100%;
						}
				</style>

		</head>
		<body>
				<micr-io id="umcjt"></micr-io>
		</body>
</html>

  2. Open your own HTML page in your browser. If you've used the example, just open the file in your browser.

  3. You now see the example image with the markers in your browser. Congratulations, now the fun can start!