Invisible Hotspots

Add invisible hotspots to your HTML-based Sandbox Supademos to create a true sandbox-like experience.

What are invisible hotspots?

Available on HTML-based Sandbox Supademos, invisible hotspots allow you to make specific HTML elements clickable without any visual cues — helping you create a realistic, Sandbox experience.

Here's an example of a example Sandbox demo with invisible hotspots:

spinner

As you'll notice in the above example, there are several invisible hotspots added within the HTML content, allowing users to click through and interact with specific elements on the screen.

When they click an element(s) that are not interactive or have a hotspot, a visual cue is shown to highlight the interact-able elements.

Adding or editing an invisible hotspot

To add an invisible hotspot, simply:

  1. Click into Edit mode in any HTML Supademo

  2. Just below the demo window, click on Sandbox Mode

  3. Click on any Element in your recorded window; then under "Link to Step" choose the Step you want to connect the element to.

  4. Repeat this as many times as you'd like to make specific elements interactive but invisible

    1. To edit an existing invisible hotspot, click on the existing green link, to update the connected step.

  5. Click Save on the top right corner of the window to save your changes.

You can use invisible hotspots to set up a sandbox-like experience. Alternatively to set up a full sandbox experience, we recommend using Sandbox Mode via the below tutorial:

spinner

Last updated

Was this helpful?