Invisible hotspots

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

What are invisible hotspots?

Available on HTML-based 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:

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. Add a hotspot to an HTML-based Supademo

2. Choose the Invisible option

3. Use the Next/Back mapping to route users to the relevant slide when this invisible hotspot is clicked

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 an invisible hotspot from the demo editor and repeat steps 2/3!

5. Click Save on the bottom of the sidebar panel to finalize your changes.

Tip: you can reposition your hotspot at any time by clicking the Hotspot Anchor Position button at the top of the sidebar panel after clicking Edit on a particular hotspot.