Lovedeep

lovedeep5

Proofing Pins lets clients and reviewers click anywhere on your site’s frontend to drop a comment pinned to that exact spot. Each pin is captured with a viewport screenshot so developers see what the reviewer saw. All comments live in a focused Proofing dashboard in wp-admin — no more “the button under the banner thing” emails.
Watch the 2-minute tutorial:
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/8UJX0GmM79k?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
Core features
<ul>
<li>Pin-point comments: reviewers click, type, submit — pin is saved with a screenshot that has the pin baked into the image at the click location.</li>
<li>Modern capture: uses the html-to-image library (SVG foreignObject renderer) for reliable screenshots even on Elementor or block-theme pages.</li>
<li>Responsive anchoring: pins are stored against the clicked element (selector + percentage-within-element), so they follow the element across viewport sizes.</li>
<li>Threaded replies: native WordPress comments attached to each pin for discussion between reviewers and developers.</li>
<li>Admin dashboard: list + grid views, status workflow (Open / In Progress / Resolved / Archived), bulk actions.</li>
<li>Guest comments: optional — let logged-out visitors leave pins with a one-time name/email prompt (cookie-remembered for 30 days), with honeypot + per-IP rate limiting.</li>
<li>AI suggestions (optional, BYO key): bring your own OpenAI, Anthropic, Google Gemini, or OpenRouter API key. Each pin gets a one-paragraph suggestion on what to change.</li>
<li>Elementor-aware Apply button: when the AI proposes an allowlisted change (heading text, button text, color), a before/after preview appears with an “Apply to Elementor” button. Applies the change to the live page, saves a WordPress revision, one-click revert available.</li>
<li>Microsoft Teams notifications (optional): post pin activity directly to a Teams channel using a Workflow webhook. Pick which events you want — new pins, replies, and per-status transitions (Open / In Progress / Resolved / Archived). Each notification is an Adaptive Card with the comment, author, page, status, and (where small enough) the screenshot. Webhook URL is stored encrypted at rest; one-click “Send test message” verifies the wire.</li>
<li>Generic webhook notifications (optional): post the same pin activity as plain JSON to any HTTPS endpoint of your choice. Works with Zapier, n8n, Make, Power Automate, IFTTT, or any custom HTTP receiver. Each <code>pin_created</code> payload includes the screenshot URL, so downstream tools (image search, OCR, Trello cards, etc.) can attach the visual right away. Same encryption + test-message verification as the Teams integration.</li>
</ul>
Data, privacy, and third-party services
<ul>
<li>The plugin does not send any data to third parties by default.</li>
<li>The AI feature is opt-in. You provide your own API key; requests go directly from your WordPress server to the provider you configure (OpenAI, Anthropic, Google, or OpenRouter). No data is sent to the plugin author. When enabled, each new pin’s comment text, captured element HTML, and metadata are sent to the configured provider so it can generate a suggestion — consult your provider’s privacy policy.</li>
<li>The Microsoft Teams integration is opt-in. You provide your own Teams Workflow webhook URL; notifications are posted directly from your WordPress server to that webhook (typically a Microsoft-hosted Azure Logic Apps endpoint). No data is sent to the plugin author. Payloads include the pin comment, author name, page URL, status, and a heavily compressed thumbnail when one fits — see “External Services” below for the exact contract.</li>
<li>The Generic Webhook integration is opt-in. You provide your own HTTPS endpoint; JSON payloads are posted directly from your WordPress server to that endpoint. The destination is entirely controlled by you; the plugin contacts no specific third-party service for this feature. No data is sent to the plugin author. Payloads include the pin comment, author name, author email (when available), page URL, status, and the screenshot URL — see “External Services” for the exact contract.</li>
<li>Screenshots are stored locally in your WordPress uploads folder — never uploaded elsewhere.</li>
<li>Guest identities (name + email) are stored in a cookie (<code>proopin_guest_identity</code>) for 30 days only on the visitor’s own browser.</li>
<li>When guest commenting is enabled, the plugin stores a short hash of each guest submitter’s IP address (first 16 characters of the MD5 hash) for the sole purpose of rate-limiting abusive submissions. Raw IP addresses are never stored.</li>
</ul>
<h3>External Services</h3>
This plugin can connect to third-party services only when their corresponding integration is explicitly enabled. Every integration is opt-in and disabled by default. No external connections are made unless you turn on a feature and provide its credential (API key for AI, webhook URL for Teams) in the plugin’s settings screens.
When AI is enabled and a new pin is created (or you manually trigger a suggestion), the following data is sent from your WordPress server directly to your configured AI provider: the pin’s comment text, the page URL, the page title, the clicked element’s tag name and a short HTML snippet, and the element’s CSS selector. No data is sent to the plugin author at any time.
When Microsoft Teams is enabled, the following data is sent from your WordPress server directly to the Workflow webhook you configured (typically a Microsoft-hosted endpoint at logic.azure.com): the pin’s comment text, the author’s display name (or guest name), the page URL, the pin status, the event type, and — only when it fits inside Teams’ card-size budget — a heavily compressed JPEG thumbnail of the pin’s screenshot. The webhook URL is supplied by you and points to whatever channel/workflow you set up in Teams; the plugin does not contact any other Microsoft endpoint. No data is sent to the plugin author at any time.
Only the providers you configure are contacted. Each supported service is documented below.
<h4>OpenAI</h4>
Used for: generating AI pin suggestions and listing available models. 
Data sent: pin comment, page URL, element context (tag, HTML snippet, selector). 
Sent when: AI suggestions are enabled and a pin is created (if auto-suggest is on), or when you click “Regenerate suggestion” in the pin detail view.
<ul>
<li>Service: https://openai.com/</li>
<li>Terms of Use: https://openai.com/policies/terms-of-use</li>
<li>Privacy Policy: https://openai.com/policies/privacy-policy</li>
</ul>
<h4>Anthropic</h4>
Used for: generating AI pin suggestions and listing available models. 
Data sent: pin comment, page URL, element context (tag, HTML snippet, selector). 
Sent when: AI suggestions are enabled and a pin is created (if auto-suggest is on), or when you click “Regenerate suggestion”.
<ul>
<li>Service: https://www.anthropic.com/</li>
<li>Terms of Service: https://www.anthropic.com/legal/consumer-terms</li>
<li>Privacy Policy: https://www.anthropic.com/legal/privacy</li>
</ul>
<h4>Google Gemini (Generative Language API)</h4>
Used for: generating AI pin suggestions and listing available models via Google’s Generative Language API (generativelanguage.googleapis.com). 
Data sent: pin comment, page URL, element context (tag, HTML snippet, selector). 
Sent when: AI suggestions are enabled and a pin is created (if auto-suggest is on), or when you click “Regenerate suggestion”.
<ul>
<li>Service: https://ai.google.dev/</li>
<li>Terms of Service: https://ai.google.dev/gemini-api/terms</li>
<li>Privacy Policy: https://policies.google.com/privacy</li>
</ul>
<h4>OpenRouter</h4>
Used for: generating AI pin suggestions and listing available models via the OpenRouter gateway (openrouter.ai). 
Data sent: pin comment, page URL, element context (tag, HTML snippet, selector). 
Sent when: AI suggestions are enabled and a pin is created (if auto-suggest is on), or when you click “Regenerate suggestion”.
<ul>
<li>Service: https://openrouter.ai/</li>
<li>Terms of Service: https://openrouter.ai/terms</li>
<li>Privacy Policy: https://openrouter.ai/privacy</li>
</ul>
<h4>Microsoft Teams (via user-configured Workflow webhook)</h4>
Used for: posting pin activity (new pin, new reply, status change) to a Microsoft Teams channel as Adaptive Cards. 
Data sent: pin comment, author display name (or guest name), page URL, pin status, event type, and — when small enough to fit Teams’ card payload budget — a heavily compressed JPEG thumbnail of the pin screenshot. 
Sent when: the Teams integration is enabled, a webhook URL is configured, and the corresponding event happens on a pin. Also sent on demand when the admin clicks “Send test message” on the Teams settings screen.
The destination URL is provided entirely by you. The plugin only posts to whichever Workflow webhook URL you save (typically a Microsoft-hosted endpoint at https://*.logic.azure.com/ — created by Teams’ “Post to a channel when a webhook request is received” workflow template). The webhook URL is stored encrypted at rest.
<ul>
<li>Service: https://www.microsoft.com/en-us/microsoft-teams/group-chat-software</li>
<li>Terms of Service: https://www.microsoft.com/en-us/servicesagreement/</li>
<li>Privacy Statement: https://privacy.microsoft.com/en-us/privacystatement</li>
</ul>
<h4>Generic Webhook (user-configured endpoint)</h4>
Used for: posting pin activity (new pin, new reply, status change) as plain JSON to any HTTPS endpoint of your choice. Common destinations are Zapier, n8n, Make, Power Automate, IFTTT, or your own custom webhook receiver — but the plugin does not contact any specific service. The destination is whatever URL you save.
Data sent: pin id, pin comment, pin status, pin status label, page URL, page title, screenshot URL (or empty string when none), pin admin URL, author name + email + guest flag, created-at timestamp; reply id + content + author for reply events; old/new status keys + labels for status-change events; site URL + name + event timestamp on every payload.
Sent when: the Generic Webhook integration is enabled, a webhook URL is configured, and the corresponding event happens on a pin. Also sent on demand when the admin clicks “Send test message” on the Webhook settings screen.
The destination URL is provided entirely by you and is stored encrypted at rest. The plugin enforces <code>https://</code> and validates the URL format before saving. No data is sent to the plugin author.
<h3>Third-Party Libraries</h3>
<ul>
<li>html-to-image (bubkoo/html-to-image, MIT License) — bundled as <code>assets/js/html-to-image.min.js</code>. Used for client-side viewport screenshot generation.</li>
</ul>

Proofing Pins

Pin-point client feedback on any page with screenshots. AI suggestions, Teams, generic webhook, 1-click Apply for Elementor.

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.

Proofing Pins vs Tuft Feedback