Introducing Screenshot Annotations in the Feedback Widget

A bug report that says "it's broken" is hard to act on. A bug report with an annotated screenshot pointing at the exact element? That is actionable.

We have added full screenshot capture and annotation support to the SeggWat feedback widget. When enabled, users can capture their current view, annotate it with drawing tools, and submit it alongside their feedback — all without leaving your site.

How It Works

Enable screenshots by adding a single attribute to your widget script tag:

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

When a user clicks "Add Screenshot" in the feedback modal:

1. The widget captures the visible viewport using SnapDOM.
2. A fullscreen annotation editor opens with drawing tools.
3. The user annotates the screenshot and clicks "Done".
4. The annotated image is attached to their feedback submission.

Annotation Tools

The editor includes everything needed to communicate visual feedback clearly:

• Arrow — Point at specific UI elements.
• Rectangle — Highlight areas of interest.
• Pen — Freehand drawing for quick marks.
• Text — Add multi-line text notes directly on the screenshot.
• Blackout — Redact sensitive information before submitting.

Users can undo/redo, adjust colors and opacity, resize strokes, and zoom in for precision. Keyboard shortcuts (Ctrl+Z, +/- for zoom, ? for help) make the experience smooth for power users.

Why SnapDOM

We evaluated html2canvas and dom-to-image before settling on SnapDOM. The key advantage: SnapDOM supports modern CSS features like oklch, oklab, and color-mix() that the older libraries choke on. If your site uses modern color spaces, the screenshots will look correct.

Privacy by Design

The blackout tool exists for a reason. Users might have personal data visible on screen when they submit feedback. Giving them a redaction tool means they can remove sensitive information before it ever hits your server.

Screenshots are compressed as JPEG with configurable quality (data-compression-quality) and size limits (data-max-screenshot-size-mb) to keep uploads fast.

Try It Out

If you are already using the SeggWat feedback widget, just add data-enable-screenshots="true" to your script tag. Check the widget documentation for the full configuration reference.