Drawing Annotations
Annotations let you mark the exact spot on a live website or video frame so there's no confusion about what your feedback refers to. Instead of writing "the button near the top," you can drop a pin, draw a box, or scribble directly over the problem area. Every annotation is captured alongside a screenshot, page URL, browser, and screen size so your team can act on it right away.
How It Works
•Drop a pin to mark a single, precise point on the page or video frame.
•Draw a rectangle or circle to highlight a wider region, such as a section, image, or block of text.
•Use the free-form scribble tool to circle or underline anything the built-in shapes can't frame neatly.
•On video projects, each annotation is tied to the exact timecode where you placed it, so reviewers land on the right moment.
•Every annotation automatically captures a screenshot, page URL, browser, and viewport size — no manual notes required.
•Switch the preview between desktop, tablet, and mobile framing so annotations stay relative to the device they were left on.
Steps
1.Open the site with the Droppnotes extension, or open a video project, and click Start commenting.
2.Choose an annotation tool from the toolbar: pin, rectangle, circle, or scribble.
3.For a pin, click the exact spot. For a shape, click and drag to draw the region. For scribble, hold and draw free-form.
4.Type your comment in the note that appears, and optionally attach a screenshot or short clip as extra context.
5.Save the annotation — it appears in the comment list and on the board for your team to pick up.
Annotation Tools
Tool | Best For | How to Use |
|---|---|---|
Pin | A single, precise point | Click once on the spot |
Rectangle | Sections, blocks, or images | Click and drag to size the box |
Circle | Rounded elements or focal points | Click and drag to size the circle |
Scribble | Free-form marks and circling | Hold and draw with the cursor |
Tips & Notes
•Combine an annotation with a written note for the clearest feedback — the shape shows where, the note explains what.
•Switch the device preview to the screen size your feedback applies to, so pins stay anchored to the right layout.
•Keep attachments lightweight — inline clips on a comment are capped at 5MB. For longer footage, use a video review project instead.
Annotations placed on a video frame remember the exact moment you paused at, so reviewers can jump straight to that point on the timeline.
Screenshots, page URL, browser, and viewport size are captured automatically with every annotation, so you rarely need to describe the environment yourself.
Troubleshooting
•Can't draw on the page? Make sure the extension is active and you've clicked Start commenting for the correct project.
•Pin landed in the wrong place? Confirm the device preview matches the screen size you intended, then re-drop the annotation.
•Attachment won't upload? Check that the file is within the size limit — inline video clips must be under 5MB and images must fit the screenshot cap.
•Annotation didn't save? A weak connection can interrupt the capture — try again once you're back online and the screenshot will re-attach.
Related topics: Drop a Pin on a Live Site, Review Uploaded Videos, Track Comments on a Board.