=== Annotix - Drag, Annotate, Feedback === Contributors: nativeinfotech Tags: feedback, annotation, collaboration, design review, bug reporting Requires at least: 6.2 Tested up to: 6.9 Requires PHP: 7.4 Stable tag: 1.0.3 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Annotate any page on the frontend with screenshots, comments, file attachments, threaded replies, and email notifications. == Description == **Annotix - Drag, Annotate, Feedback** gives your team a way to annotate any page on the frontend, capture screenshots, track status, assign items, set priority, and collaborate through threaded replies - all without leaving the site. Built by [Native Infotech](https://nativeinfotech.com/). Demo video: [https://youtu.be/VQssYhmuh0E](https://youtu.be/VQssYhmuh0E) = Core Features = * **Click-to-annotate** - click anywhere on any page to drop a feedback pin. * **Area selection** - drag to select a specific region of the page before capturing. Selection is draggable and resizable with corner handles. * **Cleaner screenshot selection** - the Pins panel auto-hides shortly after feedback mode starts and shows a soft drag-to-select notice so screenshots are not blocked by the sidebar. * **Screenshot capture** - optionally attach a viewport screenshot via bundled html2canvas. The library is lazy-loaded on demand for faster page loads. * **Screenshot format controls** - choose JPEG or PNG output and set JPEG quality from the General settings tab. * **Annotation tools** - draw arrows, rectangles, and circles over the selected area before saving. The arrow tool is selected by default for faster callouts. * **Markdown toolbar** - format feedback descriptions with bold, italic, bullet lists, numbered lists, links, and inline code. * **Guest feedback link** - allow clients without WordPress accounts to submit feedback through a private token URL. * **File attachments** - upload images, PDFs, documents, spreadsheets, and other files alongside feedback. Attachments open in a new tab and display file-type badges. * **Priority levels** - tag each feedback item as Urgent, High, Normal, or Low with colour-coded badges and dots. * **Assignment** - assign feedback items to specific team members from a dropdown. * **@Mentions** - type @ in any comment or reply to mention a user and trigger an instant notification. = Collaboration = * **Threaded replies** - discuss feedback with your team in context under each pin. * **Inline editing** - edit your own feedback descriptions and replies in place. * **Delete with confirmation** - delete your own feedback or replies with a skippable confirmation dialog. * **Resolve / Unresolve** - track completion state for each item. Resolved pins turn green. * **Draggable pins** - reposition saved pins by dragging them to a new location. = Sidebar & Navigation = * **Pins sidebar** - a collapsible sidebar lists all feedback on the current page with status filters (Unresolved / Resolved). * **Pages overview** - an expandable pages panel shows feedback counts across all pages on the site. * **Priority dots** - sidebar items display colour-coded priority indicators for quick scanning. = Email Notifications = * **Digest mode** (recommended) - batches all activity into a single email at a configurable interval (15 / 30 / 60 minutes). * **Smart mode** - digest by default, but sends instant emails for assignments and @mentions. * **Configurable** - enable or disable notifications, choose delivery mode, and toggle instant alerts for assignments and mentions independently. = Admin Feedback = * **Plugin feedback form** - send bug reports, questions, or feature requests to Native Infotech directly from the WordPress admin settings. = Security & Permissions = * **Role-based access** - assign each WordPress administrator as Client, Dev, or No Access. * **Guest token access** - optionally enable a private share link for non-WordPress clients. Guests can view page pins and create new feedback, but cannot edit, resolve, delete, or manage existing feedback. * **Client role** - full access: create, edit own descriptions, move pins, assign, reply, resolve, delete, and upload attachments. * **Dev role** - limited access: view, reply, and resolve/unresolve only. * **No Access** - cannot see or use Annotix. * **Zero public routes** - all REST endpoints require authentication with valid permissions. * **Rate limiting** - built-in abuse protection on all REST endpoints. = Performance = * **Lazy-loaded screenshot library** - the 195 KB html2canvas library is only fetched when the user actually takes a screenshot, not on every page load. * **Smaller screenshot files** - JPEG output at configurable quality keeps feedback screenshots lightweight. * **Deferred screenshot saving** - feedback submissions return faster by saving screenshots after the REST response is flushed when supported by the server. * **Non-blocking font loading** - Google Fonts are loaded via the WordPress enqueue API instead of a render-blocking CSS import. * **Session caching** - REST responses are cached in sessionStorage for instant rendering on repeat visits, with background refresh. * **Transient caching** - mention-user queries are cached with a 5-minute WordPress transient to reduce database load. * **Conditional loading** - all plugin assets only load for logged-in users who have been granted access. = Who is it for? = Annotix - Drag, Annotate, Feedback is designed for small teams (web agencies, freelancers, internal teams) where the designer, developer, and client all have WordPress administrator accounts and need a fast way to review and annotate the live site. == Installation == 1. Upload the plugin folder to `/wp-content/plugins/`. 2. Activate the plugin through the **Plugins** screen in WordPress. 3. Go to **Settings > Website Feedback**. 4. Open the **Permissions** tab and assign each administrator as Client, Dev, or No Access. 5. Open the **General** tab to configure the feedback button position and offset. 6. Optionally open the **Email** tab to enable and configure notifications. 7. Visit any page on the frontend and click the **Feedback** button to start annotating. == Frequently Asked Questions == = Who can use Annotix? = Only logged-in WordPress administrators who have been assigned a Client or Dev role in the Permissions settings. No access is granted to editors, subscribers, or unauthenticated users. = Does it work with page builders like Elementor or Divi? = Yes. Annotix is injected as a fixed-position UI layer on the frontend and is compatible with any theme or page builder. The plugin applies its own CSS reset to prevent theme style conflicts. = Where is feedback data stored? = Feedback items and replies are stored in two custom database tables (`{prefix}antx_feedback` and `{prefix}antx_feedback_replies`). Screenshots are saved in a protected subdirectory inside the WordPress uploads folder (`uploads/antx/`). File attachments are stored in the WordPress media library. = Is feedback data deleted when the plugin is uninstalled? = Yes. The uninstall routine drops both custom tables, removes all plugin options, deletes all saved screenshots, and removes the custom capabilities from all roles. = Can I use this on a multisite installation? = The plugin is not explicitly tested for multisite. It may work on individual sites within a network but multisite support is not guaranteed in this version. = Does screenshot capture work in all browsers? = Screenshot capture uses [html2canvas](https://html2canvas.hertzen.com/) which works in all modern browsers. Some CSS features (SVG backgrounds, custom fonts loaded from external origins) may not render in the captured screenshot due to browser security restrictions. = What file types can I attach? = You can attach images (PNG, JPG, GIF, WebP, SVG), PDFs, plain text, CSV, RTF, and Microsoft Office documents (Word, Excel, PowerPoint). == Screenshots == 1. The feedback toggle button in the bottom-right corner of the frontend. 2. Area selection mode - drag to select the region you want to annotate. 3. The annotation toolbar for drawing rectangles, circles, and arrows. 4. The comment panel with priority selector, assignee dropdown, file attachments, and @mention support. 5. A feedback pin on the page with its threaded comment card open, showing inline reply editing. 6. The sidebar listing all feedback items with priority dots and status filters. 7. The pages overview panel showing feedback counts across the site. 8. The Permissions settings tab in the WordPress admin. 9. The Email settings tab with digest frequency options. 10. The Feedback settings tab for sending plugin feedback to Native Infotech. == Third-Party Services == This plugin loads the **Inter** and **Manrope** font families from **Google Fonts** (`fonts.googleapis.com`) on frontend pages for logged-in users who have feedback access. No personal data is sent by the plugin itself, but the browser will make a request to Google's servers to retrieve the font files. * Service: [Google Fonts](https://fonts.google.com/) * Terms of Service: [https://policies.google.com/terms](https://policies.google.com/terms) * Privacy Policy: [https://policies.google.com/privacy](https://policies.google.com/privacy) This plugin bundles the **html2canvas** library (MIT license) for optional screenshot capture. The library is loaded locally from the plugin directory and makes no external requests. * Project page: [https://html2canvas.hertzen.com/](https://html2canvas.hertzen.com/) * License: [MIT](https://opensource.org/licenses/MIT) This plugin includes a voluntary feedback form in the admin settings (Settings > Website Feedback > Feedback). If you choose to submit feedback, your name, email address, subject, and message are sent to Native Infotech via your site's WordPress mail system. No data is collected automatically — submission only occurs when you click "Send Feedback". * Native Infotech: [https://nativeinfotech.com/](https://nativeinfotech.com/) * Privacy Policy: [https://nativeinfotech.com/privacy-policy/](https://nativeinfotech.com/privacy-policy/) == Changelog == = 1.0.3 = * Improve: Pins sidebar now auto-hides shortly after entering screenshot selection mode so it does not cover the page capture area. * Improve: A soft selection notice appears after the sidebar hides, prompting users to drag on the page to select the screenshot area. * Improve: The arrow annotation tool is now selected by default after area selection. * Improve: Screenshot capture now validates fallback and final canvases, skips unusable blank captures, and shows a placeholder instead of saving a broken image. * Improve: Added configurable screenshot output format and JPEG quality settings to reduce screenshot file size. * Improve: Screenshot files are saved after the REST response is flushed when supported, making feedback submission feel faster. * Add: New admin Feedback tab for sending plugin feedback, bug reports, and feature requests to Native Infotech. * Add: Guest feedback links let clients without WordPress accounts submit feedback through a private token URL. = 1.0.2 = * Fix: Screenshot saving is now more reliable during frontend feedback creation. * Fix: Screenshot capture is more compatible with Neve starter sites, Otter/Atomic Wind blocks, and Hello Elementor layouts. * Fix: Capture sanitization now avoids unsupported color-mix() and oklab CSS that caused blank or failed screenshots. * Fix: Feedback screenshots now better match selected areas while avoiding heavy shadow artifacts from theme styles. * Fix: Priority and assignee dropdown controls render more reliably across themes. * Improve: Screenshot capture feels faster by preloading html2canvas when needed, showing saving state immediately, and reducing unnecessary capture prep work. = 1.0.1 = * Fix: Feedback button no longer appears in Divi 5 frontend builder edit mode. = 1.0.0 = * Initial release. == Upgrade Notice == = 1.0.3 = Recommended update for a cleaner screenshot selection flow, default arrow annotations, and the new admin feedback form. = 1.0.2 = Recommended update for improved screenshot capture reliability, better theme compatibility, and cross-theme form control styling. = 1.0.0 = Initial release. No upgrade steps required.