Micrio Knowledge Base

Appearance

Creating your own welcome screenClient 4.x ​

INFO

This page is about the Micrio client version 4.

Some Micrio projects, such as the Garden of Earthly Delights, have an introduction screen to bid the user welcome and give a short explanation of the website.

This is not an option in the Micrio editor itself, since that is only for working with the image itself. However, using a Micrio embed in your own website, with a bit of HTML and CSS coding you can make add one very easily.

WORKING EXAMPLE

If you want to play around with a working example containing both a vanilla JavaScript and Svelte/TypeScript based implementation, see the GitHub repository at https://github.com/Q42/Micrio.CustomProject

The gist ​

The basic idea of an intro screen is very simple: it is a HTML element, which is overlaid on the Micrio embedded element. If you have access to your website's HTML, you can easily create a <div> layer which will sit on top of the Micrio image.

There, you can put your welcome contents, and can place a <button> which will actually just hide that welcome <div>, allowing the user to start interacting with the Micrio image itself.

A pseudo example:

html
<!-- The Micrio embed element, can be an <iframe> as well -->
<micr-io id="{your ID}"></micr-io>

<!-- Your welcome element -->
<div id="welcome">
  <h1>Welcome!</h1>
  <button onclick="document.getElementById('welcome').remove()">Start!</button>
</div>
<!-- The Micrio embed element, can be an <iframe> as well -->
<micr-io id="{your ID}"></micr-io>

<!-- Your welcome element -->
<div id="welcome">
  <h1>Welcome!</h1>
  <button onclick="document.getElementById('welcome').remove()">Start!</button>
</div>

This shows your welcome message, and hides it when the user clicks on the "Start" button. Easy peasy!

Custom button behavior ​

If you want to give your users multiple options from your intro screen, such as immediately being able to start certain tours, you can use the Micrio JavaScript API documentation for this.

An example of showing the users 2 buttons, one to freely explore the image, and one to start the first Marker Tours, could be done by expanding the above example using this:

html
<script>
function closeWelcome(){
  document.getElementById('welcome').remove();
}
function startTour(){
  // First close the welcome screen
  closeWelcome();

  // Get the main <micr-io> controller
  const micrio = document.querySelector('micr-io');

  // Get the currently displayed Micrio image
  const image = micrio.$current;

  // Start the first available Marker tour in the currently shown Micrio image
  micrio.state.tour.set(image.$data.markerTours[0]);
}
</script>

<!-- ... inside the #welcome div ... -->
<button onclick="closeWelcome()">Explore freely</button>
<button onclick="startTour()">Start the tour</button>
<script>
function closeWelcome(){
  document.getElementById('welcome').remove();
}
function startTour(){
  // First close the welcome screen
  closeWelcome();

  // Get the main <micr-io> controller
  const micrio = document.querySelector('micr-io');

  // Get the currently displayed Micrio image
  const image = micrio.$current;

  // Start the first available Marker tour in the currently shown Micrio image
  micrio.state.tour.set(image.$data.markerTours[0]);
}
</script>

<!-- ... inside the #welcome div ... -->
<button onclick="closeWelcome()">Explore freely</button>
<button onclick="startTour()">Start the tour</button>

To learn more about Micrio's State Management API, check out these two API documentation pages:

Example code on GitHub ​

We've created a GitHub example code for you, using Svelte for creating an image's welcome screen. Feel free to fork and tweak it to your liking.

Check it out here: https://github.com/Q42/Micrio.CustomProject