Hotspots and Callouts

Add interactive hotspots and informational callouts to guide viewers through your demo flow.

Hotspots and callouts are the primary tools for guiding viewers through an Interactive Demo. Hotspots require interaction to advance; callouts provide context without blocking progress.

Hotspots

A hotspot highlights an element on the screen and tells the viewer what to click. When the viewer clicks the hotspot, the demo advances to the next step.

Adding a hotspot

Select a step in the editor.
Click the element you want to highlight, or draw a hotspot region manually.
Write the instruction text (e.g., "Click Settings to open preferences").
Set the click action -- typically Go to next step, but can also trigger a branch or open a URL.

Hotspot styles

Pulse -- An animated ring that draws attention to the target area.
Beacon -- A small pulsing dot positioned on the element.
Outline -- A static border around the target element.
None -- No visual indicator; the hotspot is invisible until hovered.

Callouts

Callouts are non-interactive annotations. They display information but don't require a click to proceed.

Callout types

Tooltip -- A small text bubble anchored to an element. Appears on step load or on hover.
Modal -- A centered overlay with a title, description, and optional image. Viewers dismiss it to continue.
Highlight -- A colored overlay that draws attention to a region without text.

Positioning

Callouts anchor to a specific element. Set the preferred position (top, bottom, left, right) and the editor adjusts automatically if there isn't enough space.

Styling

Under Demo Settings > Appearance, customize:

Hotspot and callout background colors.
Text color and font size.
Border radius and shadow.
Animation speed.

These settings apply to all hotspots and callouts in the demo. Override individual callouts by editing their style properties directly.

Note: Keep instruction text short -- one sentence per hotspot. Viewers skim, so concise guidance works better than detailed explanations.