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:

Hotspot Type	Description
Area Hotspot	The default implementation for large clickable areas anchored to elements
Modal Hotspot	Displays content in a floating overlay—ideal for high-level introductions
Pointer Hotspot	Creates precise click points with improved tooltip positioning

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.

Advanced hotspot design settings

Each hotspot type can be styled to match your desired level of visibility and focus:

Design Style	Use Case
Default	Ideal for clearly highlighting specific UI elements
Backdrop	Adds a dark overlay to spotlight a section or feature

Other hotspot customization settings

Hotspots support a range of additional customization options:

• Navigation controls: Add next/previous buttons or skip actions

• Branching: Link to different demo paths based on user clicks

• Animations: Add fade or slide-in transitions

• Transparency and padding: Adjust how visually dominant the hotspot is

These can be applied per hotspot or as default settings for the entire Supademo.