Hotspots

The Primary Instructional Layer

Hotspots are the primary instructional layer inside guided Supademo experiences. They provide text-based navigation and guidance that tell viewers where to look, what to click, and what to understand in each step.

This is where the actual teaching happens. Everything else — chapters, showcases, analytics — exists to support and frame this layer of instruction.

Hotspots are automatically generated when recording with the Chrome extension in guided HTML or guided screenshot mode. Sandbox demos intentionally do not include guided hotspots, because sandbox demos are designed for exploration rather than instruction.

Hotspots are powerful, but they are also one of the easiest ways to overwhelm viewers. Too many hotspots, poorly placed hotspots, or overly complex navigation can quickly make a demo feel confusing. The goal is not to explain everything. The goal is to guide attention, provide just enough context, and move the viewer forward with confidence.

Three Hotspot Types

Supademo supports three hotspot types, each with a distinct role.

Pointer hotspots loosely highlight areas of the interface. They are generally used sparingly because they can easily cover UI elements that viewers are meant to see or interact with. Pointer hotspots can be useful for early orientation steps, but should be applied with care.

Callout hotspots are more text-forward and work best when explaining a page or providing higher-level context. A common example is a dashboard walkthrough, where callouts explain what the dashboard is, why it matters, and how it is generally used. These hotspots are descriptive rather than directive.

Custom area hotspots are the most commonly recommended option. They visually frame a specific UI element and clearly direct the viewer's attention to where to look and what to interact with next. They are the clearest, least ambiguous choice and tend to perform best across most demos.

Visual Clarity

Visual clarity is critical.

Too many hotspots on a single step create noise. If a step starts to feel busy, it probably is. Fewer hotspots almost always perform better.

Hotspots should never cover the UI elements they are meant to explain. If the viewer cannot see the interface clearly, the hotspot is not helping. Hotspots should always be positioned so the underlying UI remains visible and readable.

Navigation buttons should be managed intentionally. When multiple hotspots exist on a single step and they all lead to the same next step, back and forward buttons should be hidden on all but one hotspot. Navigation controls should only be shown when they meaningfully change where the viewer goes. This reduces confusion and keeps the experience predictable.

Branching

Hotspots can dynamically branch to different steps, but this capability should be used sparingly.

Most viewers prefer demos that are simple, linear, and predictable. Excessive branching increases cognitive load and makes demos harder to follow, harder to maintain, and harder to analyze.

Dynamic hotspot branching also does not behave well when viewers use back or forward arrows, when demos are autoplayed, or when demos are downloaded as videos. In those cases, the demo will play linearly in step order and branching logic will be ignored.

When branching starts to feel complex, chapters are almost always the better solution.

Hover Text

For dashboards or visually dense screens, always-on hotspot text can clutter the experience.

Setting hotspot text to appear only on hover keeps the interface clean while still making context available when needed. This is especially effective for complex layouts where multiple elements need explanation without overwhelming the viewer.

Styling

Hotspot colors, fonts, and backgrounds inherit from workspace theme settings by default and can be overridden at the demo level if needed.

Pulse animations should be used sparingly. While they draw attention, they can quickly become distracting if overused.

Hotspots can also be deleted entirely if they are unnecessary. Consistency matters more than creativity here. Selecting a clear style and applying it consistently leads to better comprehension and better performance.

Keep It Simple

The simplest demos usually perform the best.

Hotspots are meant to guide, not lecture. When used intentionally, they help viewers stay oriented, confident, and focused on what matters most.

Hotspots do a great job guiding attention and interaction, but they're only part of the story. In the next lesson, we'll look at voiceovers and how they add context and explanation without cluttering the screen.