HTML-based hotspots

Make your HTML-based demos come alive with precise, dynamic hotspots.

What are hotspots in HTML-based Supademos?

Hotspots in HTML demos are anchored to real elements like buttons, charts, or input fields—giving your viewers a guided, click-through experience that mirrors your live product.

Compared to hotspots on screenshot-based Supademos, hotspots operate differently for HTML-based interactive demos.

Each HTML hotspot has a corresponding anchor position — the element which your hotspot is attached next to. Anchor positions can be elements like buttons, charts, text, or sections.

Adding or editing a hotspot

By default, hotspots are automatically added to your HTML-based Supademo after recording. However, these initial positions can be edited post-recording. In addition, new hotspots can be added to an existing or new slide:

1. To edit an existing hotspot's position, click Edit for a particular hotspot. For new hotspots, click Add Hotspot.

2. Next, click Add/change anchor element on the top right of the hotspot sidebar.

3. In the corresponding modal that opens, click the element you'd like the hotspot to be positioned next to or above/below.

4. After your selection, click on Continue on the top right.

5. Next, customize your hotspot text, tooltip position along with your desired design, colors, and animation.

6. 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.

Hotspot design options

When it comes to hotspot designs, you can choose from three distinct styles:

1. The Default style: great for highlighting entire elements.

2. The Backdrop style: great for bringing even more focus to a particular section or element. It adds a dark background outside of the element to highlight it to the end viewer.

3. The Invisible style: can be used to make elements clickable without any visual cues, which is great for adding multiple hotspots with multiple branching options on one slide.

Tip: You can use multiple invisible hotspots to create a full sandbox-like demo environment.

As always, you can access even more hotspot options (like branching, transparency, next/previous buttons, etc) by setting them on a per-hotspot or per-Supademo basis.