M03G

Image Annotations plugin lets readers to leave annotations to the selected area of the image in comments. Important: for now the plugin works only with <a href="https://wordpress.org/plugins/comment-images/" rel="ugc">Comment Images</a> plugin (by Tom McFarlin).
Readers can switch off the visibility of the selections as well as control the display of the comments. Only authorized users can leave annotations (also user can delete his own annotations).
Плагин Image Annotations позволяет читателям оставлять аннотации к выделенной области на изображении в комментариях. Важно: на данный момент плагин работает только с плагином <a href="https://wordpress.org/plugins/comment-images/" rel="ugc">Comment Images</a>.
Читатели могут контролировать видимость выделенных областей на изображении и включать и выключать отображение комментариев. Только зарегистрированные пользователи могут оставлять аннотации (также пользователь может удалить свою аннотацию).

Image Annotations

Image Annotations plugin lets readers to leave annotations to the selected area of the image in comments.

George Stephanis

Tuft adds a floating button to every page on your site. When clicked, it enters a targeting mode that lets the visitor click any element on the page to annotate it. The plugin captures the DOM selector, click coordinates, viewport dimensions, form field state, and an in-browser screenshot, then presents a drawing toolbar so the reviewer can mark up the screenshot before typing their feedback. Everything is stored locally as a custom post type for admin review.
<h4>Key features</h4>
<ul>
<li>Click-to-annotate — click the “Feedback” button then click any element. The hovered element highlights so you know exactly what you’re selecting.</li>
<li>In-browser screenshots — uses html2canvas (bundled with the plugin, no CDN dependency) to capture the visible viewport at the moment of submission.</li>
<li>Freehand canvas annotation — a drawing toolbar below the screenshot preview lets reviewers draw freehand strokes or rectangles, undo the last stroke, or clear all marks. Annotations are baked into the submitted JPEG on the client.</li>
<li>Context capture — records the CSS selector, viewport-relative click coordinates, viewport dimensions, and any visible form field values (passwords excluded).</li>
<li>Feedback modal — clean overlay collects the visitor’s feedback text alongside the annotated screenshot. Logged-in users are not prompted for name or email — their WordPress account details are used automatically. Guest visitors see name and email fields.</li>
<li>Widget visibility controls — choose who sees the feedback button: everyone (including logged-out visitors), logged-in users only, editors and above, or administrators only. Configured under Settings → Tuft Feedback.</li>
<li>Submission rate limiting — cap submissions per IP address per hour to protect against spam. Set to 0 to disable. Tracked via post meta queries.</li>
<li>Built-in notifications — email a comma-separated list of addresses and/or POST a JSON payload to any number of webhook URLs on every submission. Works with Slack incoming webhooks, Discord, Teams, Zapier, Make, and any HTTP endpoint.</li>
<li>Local storage — submissions saved as a <code>tuft_feedback</code> custom post type with full metadata and a screenshot attachment.</li>
<li>Admin review — list table with columns for feedback text, source page, element selector, submitter, and screenshot thumbnail. Full detail view with screenshot in the post editor.</li>
<li>Alpaca Issue Tracker integration — if <a href="https://wordpress.org/plugins/alpaca-issue-tracker/" rel="ugc">Alpaca Issue Tracker</a> is installed, each submission is automatically mirrored as a Kanban issue on the Alpaca board. The Tuft admin menu moves under the Alpaca Project Board menu.</li>
</ul>
<h4>Intended use</h4>
This plugin is designed for local development and staging environments where you want clients or team members to leave visual design notes without logging in to a project management tool. The widget visibility setting under Settings → Tuft Feedback controls who sees the button; the REST endpoint that receives submissions is open by default — review the security notes before deploying to a publicly accessible production site.
<h4>Alpaca Issue Tracker integration</h4>
When <a href="https://wordpress.org/plugins/alpaca-issue-tracker/" rel="ugc">Alpaca Issue Tracker</a> is active alongside Tuft:
<ul>
<li>Each submission creates a matching <code>alpaca_issue</code> in your board’s default (lowest-score) column.</li>
<li>Issues are tagged with the submitter’s browser and the type “Tuft” for easy filtering.</li>
<li>The Tuft admin menu moves under the Project Board submenu, so the Alpaca board becomes the primary triage interface.</li>
<li>Click any row in the Tuft list to open the full detail view including the annotated screenshot.</li>
</ul>

Tuft Feedback

Collect visual design feedback directly on the page — visitors click any element, annotate a screenshot, and add a note without leaving the browser.

Image Annotations vs Tuft Feedback