In-App Feedback Widget

<div class="features-wrapper"> <h2>Capturing Insights at the Moment of Friction</h2> <p>The deepest product insights occur precisely at the moment a user experiences friction. Redirecting users to a separate "Support Ticket" portal breaks their workflow and discourages minor issue reporting. The <strong>In-App Feedback Widget</strong> solves this elegantly. Permanently anchored in the global Admin Header, it serves as a non-intrusive listening post. With a single click, users supply visual and categorized feedback without ever leaving their current page.</p> <div class="feature-grid"> <div class="feature-card"> <h3>📸 Screenshot Capture & Annotation</h3> <p>Explaining visual bugs with pure text is frustrating. The widget's embedded <strong>Screenshot Capture</strong> auto-snapshots the current screen. Users then draw arrows, circles, or highlights using the built-in <strong>Annotation Tool</strong>, and blur sensitive data before uploading. The annotated image is attached to the feedback alongside the user's comment.</p> </div>

<div class="feature-card">
  <h3>📈 Categorization & Rating</h3>
  <p>Feedback isn't homogenous. The widget asks users to qualify their interaction using <strong>Rating Inputs</strong> (emoji scales or stars) alongside <strong>Category Selectors</strong>: "Bug Report", "Design Suggestion", "Feature Request", or "General Compliment". This ensures the development team instantly knows the nature of the incoming report.</p>
</div>

<div class="feature-card">
  <h3>📎 File Uploads</h3>
  <p>Beyond screen capturing, users can drag and drop supplemental files: error logs, PDFs, Excel documents, or external screenshots. These attachments provide additional context that accelerates issue diagnosis by the support or development team.</p>
</div>

<div class="feature-card">
  <h3>⚡ Instant Ticket Creation</h3>
  <p>When feedback is submitted, it automatically creates a support <strong>Ticket</strong> in the backend with the category, priority, screenshot attachment, and user context (current page URL, browser info, user role). Support agents see the full context immediately without asking follow-up questions.</p>
</div>

<div class="feature-card">
  <h3>🌐 Contextual Metadata</h3>
  <p>Each feedback submission automatically includes: the exact page URL where the user triggered the widget, browser and OS information, user role and permissions, and a timestamp. This metadata eliminates the "what page were you on?" loop that plagues traditional bug reports.</p>
</div>

</div> <div class="usecase-example"> <h3>Use Case: The 10-Second Bug Report</h3> <p>A franchise user reviews their monthly Analytics chart and notices the "Export Data" button overlaps the chart legend. Instead of ignoring it or writing a formal ticket, they click the <strong>"Feedback"</strong> button in the header. They select "Design Issue" from the category, press "Capture Screen" for an instant screenshot, draw a red circle around the buggy button using the Annotator, type <code>"Button blocking the legend text"</code>, and click Send. The entire procedure — routed to the Product Design team — completes in under 12 seconds.</p> </div> </div>