How to Use the Annotation Tools for Feedback
Simplify your website collaboration with Atarim’s annotation tools — visual feedback made easy.
Atarim’s annotation tools let you highlight and comment on specific areas of a webpage by capturing a screenshot of what you can currently see. Marking directly on that screenshot removes the ambiguity that written feedback alone leaves behind.
Atarim frames the purpose plainly: draw, highlight, and point directly on your view to make feedback crystal clear. No guesswork — just straightforward, visual communication.
Step-by-Step Guide
1. Access the Annotation Tool
Annotation starts from a task, not from the toolbar. Open the task you want to leave feedback on, and the control sits in its comment box.
- Open the website project from your Atarim dashboard.
- Select an existing task, or create a new one. The task popover opens with a comment input area.
- Find the annotation icon in the comment input area. Its tooltip reads Annotate a screenshot and attach as a comment.
- Select it to start the tool.
- Select Allow when your browser asks for permission to view the tab. This is your browser’s own screen-capture prompt, granting app.atarim.io permission to capture the current view.
2. Capture the Screenshot
Atarim captures your current viewport — what is on screen at that moment, not the whole page — and loads it into the annotation editor.
- Confirm the capture permission if you have not already. The system captures the current screen view and loads it in the annotation editor.
- Check the captured view shows what you intended. If the area you wanted is off screen, close the editor, scroll to it, and start again.
The Chrome extension removes the permission step: with it enabled, the current view is captured and loaded into the editor automatically. Learn More About The Chrome Extension
| Without the extension | With the Chrome extension | |
|---|---|---|
| Permission | Allow tab access each time. | Not required. |
| Capture | Loads after you grant permission. | Loads automatically. |
| Tools | Identical. | Identical. |
3. Annotate the Screenshot
The editor gives you a small set of drawing tools. They are deliberately few, because the point is clarity rather than artwork.
| Tool | Use it for |
|---|---|
| Arrow | Directing attention to one specific element or issue. The clearest tool for “this bit here”. |
| Circle | Highlighting a small element such as a button, without obscuring it. |
| Rectangle | Calling out a larger area — a section, a column, a content block. |
| Pen | Freehand marks, for roughly circling an area or sketching a direction. |
| Text | Writing notes directly on the screenshot. New text reads Double click to edit until you replace it. |
| Move/Select | Picking up something you have already drawn to move, resize, or recolour it. |
- Choose a tool from the toolbar.
- Pick a colour. Annotations start red, which stands out against most designs. Change it if red already appears on the page.
- Adjust the stroke size if you need a heavier or finer line.
- Draw on the screenshot. Each shape is a separate object, so you can select and adjust it afterwards rather than starting again.
- Add a text note to explain what needs to change.
Moving Around the Canvas
On a busy screenshot you will want to zoom in on detail and then get back out again. Two controls handle that.
- Pan — drag the canvas to move around it. Holding Space does the same while another tool is selected.
- Fit to Screen — zooms out so the whole screenshot is visible again. The quickest way to recover if you have lost your place.
Keyboard Shortcuts
Four shortcuts make the editor considerably faster, particularly when correcting a mark you are not happy with.
| Shortcut | Does |
|---|---|
| Ctrl / Cmd + Z | Undo the last mark. |
| Ctrl / Cmd + Shift + Z | Redo. |
| Delete or Backspace | Removes the selected shape. |
| Space | Hold to pan the canvas without switching tools. |
4. Publish Your Annotation
Saving attaches the marked-up screenshot to the task as a comment, where the rest of the team can see and reply to it.
- Review your annotations before saving. Check the marks land where you intended and the text reads clearly at normal size.
- Select Publish or the submit arrow. The annotated image is saved as a comment on the task.
- Check it in the task thread. The image appears in the conversation, visible to everyone with access to the project.
Benefits of Annotating
| Benefit | In practice |
|---|---|
| No ambiguity | An arrow pointing at the element removes any doubt about which one was meant. |
| Fewer rounds | Spatial problems are shown rather than described, so the fix lands right the first time. |
| Anyone can do it | No design software and no training — clients use the same tools your team does. |
| The context is preserved | The screenshot captures how the page looked at that moment, even if it changes later. |
| The discussion stays attached | Replies happen on the task, beneath the image everyone is looking at. |
Example Use Cases
| Situation | How to annotate it |
|---|---|
| Elements are misaligned | Rectangle around the group, arrow to the one that is out, and a note giving the direction to move it. |
| Spacing is too tight | Arrows on both sides of the gap with a short note — far quicker than describing which margin you mean. |
| A layout change | Rectangles around both blocks and an arrow showing where one should go. |
| A specific button or link | Circle it and add a note. Circling keeps the element visible in a way a filled shape would not. |
| A mobile-only problem | Switch to mobile width first, then annotate — the task records the screen size too. Discover Responsive Testing |
Known Limitations
- Annotation is a paid feature. On lower plans the control opens an upgrade panel instead.
- It captures the visible viewport only, not the full page.
- Annotations attach to a comment, so they cannot exist on their own.
- A published annotation cannot be edited. Draw a new one and add it as another comment.
- The screenshot is a moment in time. If the page changes afterwards, the annotation still shows how it looked when you drew on it.
FAQs
Can annotations work on mockups or designs?
Annotations are supported for web-based projects. Image and design projects have their own feedback tools. Learn More About Image Based Collaboration
Is the Chrome extension necessary?
No. Annotation works both with the extension and with URL-based projects. The extension simply removes the permission prompt each time.
How is the screenshot saved?
Once published, the annotated screenshot is added to the task as an image comment, visible to everyone with access to the project.
Do I need design software?
No. Everything happens in the browser, and the tools are deliberately simple — pen, arrow, rectangle, circle, and text.
Can I edit an annotation after publishing it?
Not the saved image. Draw a new annotation and add it as another comment on the same task.
Can I change a shape’s colour after drawing it?
Yes. Select it with Move/Select, then choose a new colour.
Can my client annotate too?
Yes, using the same tools you do.
Common issues
- The annotation icon opens an upgrade panel — annotation is not included on your plan. The panel names the minimum plan required.
- Nothing happens after selecting the icon — your browser is waiting for permission. Select Allow on the prompt, or install the Chrome extension to skip it.
- The screenshot shows the wrong part of the page — only the visible viewport is captured. Close the editor, scroll to the right area, and start again.
- You cannot select a shape you drew — switch to the Move/Select tool. Drawing tools create new shapes rather than selecting existing ones.
- Your text says “Double click to edit” — that is the placeholder. Double click it to type your own.
- You have zoomed or panned and lost the page — select Fit to Screen to bring the whole screenshot back into view.
- You drew something by mistake — undo with Ctrl or Cmd + Z, or select it and press Delete.
- Red marks are hard to see — change the colour before drawing. Red is only the default, and it disappears on a red design.
Conclusion
Atarim’s annotation tools make website feedback intuitive and efficient. By capturing what you can see and marking it up directly, teams remove the miscommunication that written feedback alone creates — and projects finish faster for it.
Annotations become tasks like any other feedback.
Tips & best practices
- Be specific. Use arrows or shapes to highlight only the key elements, not everything on the page.
- Provide context. Add a clear, concise note so the mark is actionable rather than decorative.
- Position before you capture. Only the visible viewport is captured, so scroll first.
- Install the Chrome extension if you annotate often — it removes the permission prompt every time.
- Change the colour when the design is already red. The default disappears on the wrong page.
- Collaborate actively. Encourage your team to reply within the task thread so the answer stays with the drawing.