SeggWat LogoSeggWat
Dashboard

Screenshot Annotation

Enable screenshot capture and annotation in the feedback widget

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.

Quick Start

Enable screenshots by adding the data-enable-screenshots attribute:

html
<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-screenshotsbooleandefault:"false"

Enable the screenshot capture and annotation feature

data-max-screenshot-size-mbnumberdefault:"5"

Maximum file size in megabytes for the compressed screenshot

data-compression-qualitynumberdefault:"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

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

Custom Settings

html
<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

html
<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:

javascript
// 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:

javascript
// 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:

Shortcut Action
Ctrl+Z / Cmd+Z Undo last annotation
Ctrl+Shift+Z / Cmd+Shift+Z Redo annotation
Ctrl+Y / Cmd+Y Redo annotation (alternative)
Escape Close 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

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 Size Quality 0.8 Quality 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

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+

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

Navigation