HTML-based Hotspots

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.

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.

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.