SupportShot

Overview

SupportShot is a bug-report widget you drop into any website with a single script tag. A visitor clicks the report button, describes what’s wrong, marks up a screenshot with a pen, arrows, boxes, and text in five colors, and sends it. The ticket that lands in your inbox has the annotated screenshot, the last 200 console log entries and JS errors, failed network requests, the page URL, and the browser, OS, and viewport, everything needed to reproduce the bug without a back-and-forth.

Technical Challenges

• The widget has to run inside someone else’s page without leaking styles in either direction or depending on anything already loaded there.
• Loading it asynchronously, so it never blocks page render, means it still has to catch errors that happen before it finishes initializing.
• Capturing enough diagnostic context to make a ticket actionable, console output, network failures, environment, without capturing anything a privacy-conscious team wouldn’t want captured.
• Ticket delivery has to work for recipients who never sign up for anything, so the whole flow from click to inbox needs to hold up with zero account setup on either end.

Solution

A monorepo split between the widget and the app that receives its output:

• The widget itself is built with tsup into a single IIFE, no SDK, no dependencies on the host page, and rendered inside a shadow root so host CSS can’t touch it and its own styles can’t leak out.
• Error capture starts as soon as the script begins executing, so even with async loading, console errors from init onward are recorded.
• A Next.js app handles the marketing site, docs, dashboard, ingest API, billing, and a mail outbox that emails tickets to one or more recipients, no account required to receive one.
• Postgres stores projects and tickets behind the ingest API.
• Screenshot capture and annotation is deliberately scoped to the visible page, request bodies, headers, cookies, and keystrokes are never touched.

Key Features

• One script tag, no SDK, no dependencies on the host page
• Shadow-root isolated so host CSS can’t break the widget or vice versa
• Async loading that still captures errors from init onward
• Screenshot annotation: pen, arrows, boxes, text, five colors
• Tickets include console log (last 200 entries + JS errors), failed network requests, page URL, browser/OS/viewport
• Never captures request bodies, headers, cookies, or keystrokes
• Email delivery to multiple recipients, no account needed to receive a ticket
• Free plan: 1 project, 50 tickets/month