Annotations
Annotations let you add interactive elements on top of your step screenshots — to guide viewers, highlight important areas, and prompt action.
A screenshot showing a step with several annotations visible will go here.
Adding an annotation
- Select the step you want to annotate
- In the Static annotations toolbar above the canvas, click the annotation type you want to add
- Click on the screenshot to place the annotation
- Edit its properties in the right-hand panel
Annotations can be dragged to reposition them after placement.
Annotation types
Tooltip
A tooltip is a small pop-up that appears when the viewer hovers over or focuses on a hotspot. Use tooltips to explain a UI element, provide context, or give instructions.
A screenshot showing a tooltip annotation on a demo step will go here.
Properties:
- Title — a short headline for the tooltip
- Body — the main explanation text (supports line breaks)
- Placement — whether the tooltip appears above, below, left, or right of the hotspot
- Hotspot style — choose between a pulsing ring, solid ring, or dot
Tooltips are great for:
- Explaining what a button does
- Pointing out a subtle UI element the viewer might miss
- Providing additional context without cluttering the screenshot
Hotspot
A hotspot is a clickable marker placed directly on the screenshot. When the viewer clicks it, the demo advances to the next step. Use hotspots when your transition type is set to Hotspot click.
A screenshot showing a hotspot annotation will go here.
Properties:
- Style — pulse, ring, or dot
- Size — small, medium, or large
Hotspots are ideal for simulating a real click interaction, guiding the viewer to the exact element they should interact with.
CTA button
A CTA (call to action) button is a clickable button overlaid on the screenshot. It can perform one of three actions:
| Action | Behaviour |
|---|---|
| Next step | Advances the demo to the next step |
| Open URL | Opens a URL in a new tab |
| Book a demo | Opens the Calendly booking widget (if configured) |
A screenshot showing a CTA button annotation on a demo step will go here.
Properties:
- Label — the button text
- Action — what happens when the viewer clicks
- URL — the destination (only shown for the Open URL action)
- Style — primary (filled), secondary (light), or outline
CTA buttons work well at the end of a flow, or to offer an escape hatch (e.g. "See pricing") mid-demo.
Blur
A blur annotation places a frosted-glass overlay over a rectangular area of the screenshot. Use it to obscure sensitive information such as customer names, internal data, pricing, or anything else you'd rather not share publicly.
A screenshot showing a blur annotation covering a table of data will go here.
Properties:
- Width / Height — the dimensions of the blurred area (draggable in the editor)
- Intensity — how strongly the content is blurred (1–40)
Blur annotations are applied at render time, so the underlying image is never exposed to viewers. You can use multiple blur annotations per step.
Managing annotations
- Select an annotation by clicking it in the canvas
- Move it by dragging
- Edit its properties in the right-hand panel
- Delete it using the delete button in the annotation editor
Annotations are saved automatically as you make changes.