Introduction

This article explains how the Hotspot Examples sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer.

This experience uses Intuiface Headless CMS (H-CMS). If you are unfamiliar with Headless CMS, we suggest you first become familiar with it - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy - before proceeding with this article.

About the "Hotspot Examples" experience

This Intuiface experience has been published as a webpage despite using the same traditional approach to experience creation that has always been possible with Intuiface. In other words, nothing special was done to this experience to make it web-ready. This is the magic of Player.

Below is a live, interactive version of this experience.

You can interact with the experience below. Go ahead - tap it!

What you are seeing is the web-published experience running within an iFrame. Below is the HTML code. Note the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience fullscreen. Try it - if you dare!

<iframe src="https://web.intuiface.com/mkp-hotspot-examples" frameborder="0" width="100%" height="auto"></iframe>

How is this experience built?

This experience has been built with three examples, each using a different technique:

1. Museum Exhibition:
   Hotspots were created manually using Composer
2. Sales Presentation
   Hotspot information is stored in an H-CMS base
3. Wayfinding
   Hotspot information is accessed using the Excel Interface Asset

Scene breakdown

The experience is comprised of four scenes. In each scene, all images have been compressed to a size appropriate for their container, minimizing the storage requirements for content and thus maximizing download times for the experience on the web.

Home	Museum Exhibition	Sales Presentation	Wayfinding

 

Museum Example (Manual)

In this example, everything inside the scene has been built to rely solely on content found within the experience. This means no external connection or Interface Asset is required.

The basic principle is that each button is a member of a toggle button set. This means that when a button is checked, it will uncheck all the other buttons in the set. Each button has the following actions that determine which content appears in the information pop-up:

• Set text "Title"
• Set text "Description"
• Change Image "Image 1"
• Change Image "Image 2"
• Change Image "Image 3"

We have also created a toggle button that moves the pop-up in and out of the visible screen.

Sales Presentation Example (H-CMS)

Data Structure of the H-CMS base

The structure of the H-CMS base for this experience is made up of one Component.

• Hotspot Intuiville

As you can see from the screenshot below, the structure contains a long list of two Property types: Text and Image.

"Hotspot Intuiville" Data Structure

 

Content of the H-CMS base

"Hotspot Intuiville" Content

The content for the Hotspot Intuiville component can be altered to contain any list of items you desire.

In this example, everything inside the scene has been built to read information from the H-CMS base, with all the Hotspot points being housed inside a Pinboard collection. Otherwise, we apply the same informational pop-up technique as the Museum example discussed above.

The basic principle is that each button is a member of a toggle button set. This means that when a button is checked, it will uncheck all the other buttons in the set. Each button has the following actions that determine which content appears in the information pop-up:

• Set text <Usage Name>
• Set text <Summary>
• Change Image "Image"
• Change Image "Interior"

The "Show Panel" Toggle Button moves the informational pop-up in and out of the screen.

Wayfinding Example (Excel)

In this example, the data is stored in a spreadsheet rather than an H-CMS base and then accessed using an Excel Interface Asset. For a discussion of how to build this Excel-based example, see the article "Shopping Mall Wayfinder" Sample.

By the way, we have a different version of the Wayfinder example using the Headless CMS.