# Invisible Hotspots

### 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:

{% @supademo/embed demoId="cm8mktzxw0ijcxffbc3pjewnk" url="<https://app.supademo.com/demo/cm8mktzxw0ijcxffbc3pjewnk>" %}

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.&#x20;

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&#x20;
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.&#x20;
5. Click **Save** on the top right corner of the window to save your changes.&#x20;

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:

{% @supademo/embed demoId="cmbxxl3azgkoesn1rm78j3k8z" url="<https://app.supademo.com/demo/cmbxxl3azgkoesn1rm78j3k8z>" %}