Hotspots and annotations
Show viewers where to click and explain what they're looking at.
The hotspot is where the viewer clicks to go to the next step. Peutly puts it where you clicked while recording. An annotation is the tooltip that explains the step.
Pointer style
Select a step and click the pointer button in the toolbar. It shows the current type. Choose how the hotspot looks:
- Ripple. A pulsing dot.
- Highlight box. A box around the element.
- Ripple + highlight box. Both.
Highlight box
With a highlight box, you can set:
- Link to element. The box sticks to the element, even when the page scrolls. Hover to preview an element and click to link it. When elements overlap, right-click to pick the one underneath.
- Highlight type. Anchored box follows the element. Fixed position stays where you put it.
- Corners. Rounded or straight.
- Border. Bordered or Invisible.
- Effect. Backdrop dims everything outside the box. Ripple shows a pulsing ring around the box, without dimming the rest.
Annotation
Click Annotation in the toolbar and turn on Show annotation.
| Setting | Options |
|---|---|
| Title | Up to 120 characters |
| Description | Up to 500 characters |
| Bubble placement | Auto, top, right, bottom or left |
| Show annotation on | The ripple, the highlight, or both |
| Previous and next buttons | On or off |
| Hide when focus is lost | On or off, with a hide delay of up to 120 seconds (default 3) |
Keep it short
Viewers skim. One sentence about why the step matters works better than a description of what is on screen.
Want text for every step at once? The AI assistant can write annotations for the whole demo.