Skip to main content

​
Overview

The feedback widget includes an optional screenshot annotation feature that allows users to capture a screenshot of your page, annotate it with arrows, rectangles, text, and freehand drawings, and submit it along with their feedback. This is invaluable for bug reports and visual feedback.
Opt-In Feature: Screenshots are disabled by default. Add data-enable-screenshots="true" to enable this feature.

​
Quick Start

Enable screenshots by adding the data-enable-screenshots attribute: 
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-enable-screenshots="true"></script>
Replace your-project-key with your project’s unique key from the dashboard.

​
How It Works

When screenshots are enabled, the feedback modal displays an “Add Screenshot” button:
  1. User opens the feedback modal
  2. User clicks “Add Screenshot”
  3. The visible viewport is captured automatically
  4. An annotation modal opens with drawing tools
  5. User annotates the screenshot
  6. Screenshot is attached to the feedback form
  7. User adds their feedback message and submits

​
Features

  • Viewport Capture - Captures exactly what the user sees using SnapDOM
  • Arrow Tool - Draw arrows to point at specific elements
  • Rectangle Tool - Highlight areas with rectangles
  • Pen Tool - Freehand drawing for detailed annotations
  • Text Tool - Add text labels anywhere on the screenshot
  • Undo/Redo - Full history support with keyboard shortcuts
  • Color Picker - Choose annotation color
  • JPEG Compression - Optimized file sizes for fast uploads
  • Mobile Support - Touch-enabled for mobile devices

​
Configuration Options

​
Screenshot-Specific Attributes

​
data-enable-screenshots
boolean
default:"false"
Enable the screenshot capture and annotation feature
​
data-max-screenshot-size-mb
number
default:"5"
Maximum file size in megabytes for the compressed screenshot
​
data-compression-quality
number
default:"0.8"
JPEG compression quality (0.0 to 1.0). Lower values = smaller files
See the Feedback Button Widget documentation for all other configuration options.

​
Examples

​
Basic Screenshot Support

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-enable-screenshots="true"></script>

​
Custom Settings

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-enable-screenshots="true"
        data-button-color="#10b981"
        data-max-screenshot-size-mb="3"
        data-compression-quality="0.7"></script>

​
Higher Compression for Mobile

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-enable-screenshots="true"
        data-compression-quality="0.5"
        data-max-screenshot-size-mb="2"></script>

​
JavaScript API

Control screenshots programmatically: 
// Check if screenshots are enabled
console.log(SeggwatFeedback.screenshotsEnabled); // true or false

// Capture a screenshot programmatically (opens annotation modal)
await SeggwatFeedback.captureScreenshot();

// Open modal with a pre-captured screenshot blob
SeggwatFeedback.openWithScreenshot(screenshotBlob);

// Check if a screenshot is attached
SeggwatFeedback.hasScreenshot(); // true or false

// Clear the attached screenshot
SeggwatFeedback.clearScreenshot();

​
Programmatic Capture

Trigger screenshot capture from your own UI: 
// Custom button to capture screenshot
document.getElementById('report-bug-btn').addEventListener('click', async () => {
  if (window.SeggwatFeedback && SeggwatFeedback.screenshotsEnabled) {
    await SeggwatFeedback.captureScreenshot();
  }
});

​
Keyboard Shortcuts

The annotation modal supports these keyboard shortcuts:
ShortcutAction
Ctrl+Z / Cmd+ZUndo last annotation
Ctrl+Shift+Z / Cmd+Shift+ZRedo annotation
Ctrl+Y / Cmd+YRedo annotation (alternative)
EscapeClose the annotation modal

​
Annotation Tools

​
Arrow Tool

Draw arrows to point at specific elements. Click and drag from the starting point to the arrowhead location.

​
Rectangle Tool

Draw rectangles to highlight areas. Click and drag to define the rectangle bounds.

​
Pen Tool

Freehand drawing for detailed annotations. Click and drag to draw paths.

​
Text Tool

Click anywhere to add text labels. Press Enter to confirm or Escape to cancel.

​
Color Picker

Change the annotation color using the color picker in the toolbar. Default color is red (#FF0000).

​
Storage Requirements

S3 Storage Required: Screenshot uploads require S3-compatible storage to be configured on your SeggWat instance. See the S3 Setup Guide for configuration instructions.
Supported storage providers:
  • AWS S3
  • DigitalOcean Spaces
  • Cloudflare R2
  • MinIO (self-hosted)
  • Any S3-compatible service

​
Technical Details

​
Page Capture

The widget uses SnapDOM to capture the visible viewport. SnapDOM is a modern DOM capture engine that:
  • Supports all modern CSS including oklch, oklab, lab, lch, color-mix, and CSS custom properties
  • Uses native browser APIs for accurate rendering without CSS parsing limitations
  • Is significantly faster than legacy solutions like html2canvas
Some limitations still apply:
  • Cross-origin images must have CORS headers or they may appear blank
  • iframes from different origins cannot be captured
  • Video content captures the current frame only
  • Only visible viewport is captured (not the full page)

​
File Sizes

Screenshots are compressed to JPEG format. Typical file sizes:
Page SizeQuality 0.8Quality 0.6
Simple page~200-400 KB~100-250 KB
Complex page~400-800 KB~200-500 KB
High-DPI display~800 KB-1.5 MB~400-800 KB
For bandwidth-constrained users, reduce data-compression-quality to 0.6 and data-max-screenshot-size-mb to 2.

​
Dependencies

When screenshots are enabled, the widget automatically loads:
  • SnapDOM library from unpkg CDN (first capture only, ~15KB gzipped)
  • screenshot.css styles for the annotation modal

​
Browser Compatibility

The screenshot feature works in all modern browsers:
  • Chrome 60+
  • Firefox 55+
  • Safari 11+
  • Edge 79+
On mobile devices, the widget adapts with larger touch targets and a responsive toolbar layout.

​
Troubleshooting

​
Screenshot is blank or missing content

  • Check for cross-origin images without CORS headers
  • Iframes from different domains cannot be captured
  • Some CSS properties may not render correctly

​
Upload fails

  • Verify S3 storage is configured correctly
  • Check that the file size is within limits
  • Ensure your API endpoint is accessible

​
”Add Screenshot” button doesn’t appear

  • Verify data-enable-screenshots="true" is set
  • Check browser console for JavaScript errors
  • Ensure S3 storage is configured (recommended but not required for button to appear)

​
captureScreenshot() warns about screenshots not enabled

  • Add data-enable-screenshots="true" to your script tag
  • Check SeggwatFeedback.screenshotsEnabled to verify the feature is enabled

​
Next Steps

Feedback Button Widget

Learn about all feedback widget options

S3 Storage Setup

Configure storage for screenshot uploads

Internationalization

Configure multi-language support

Version Tracking

Track feedback across application versions