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:
- To edit an existing hotspot's position, click Edit for a particular hotspot. For new hotspots, click Add Hotspot.
- Next, click Add/change anchor element on the top right of the hotspot sidebar.
- In the corresponding modal that opens, click the element you'd like the hotspot to be positioned next to or above/below.
- After your selection, click on Continue on the top right.
- Next, customize your hotspot text, tooltip position along with your desired design, colors, and animation.
- 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:
- The Default style: great for highlighting entire elements.
- 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.
- 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.