Menu
Docs/Website Monitoring

Website Monitoring

Monitor websites for visual changes with automated screenshots and pixel-level diff detection.

How it works

  1. Add a URL and set a check interval (1h, 6h, 12h, 24h, or weekly)
  2. SnapSharp takes screenshots on schedule using a headless browser
  3. Each new screenshot is compared pixel-by-pixel to the previous one
  4. If changes exceed your threshold — email + webhook notification is sent
  5. View the full screenshot timeline and side-by-side diff in the dashboard

Dashboard

Manage all monitors from /dashboard/monitors.

Each monitor card shows:

  • Status — Active 🟢, Changed ⚠️, Error 🔴, Paused ⏸
  • Timeline — last 7 screenshots as thumbnails with diff badges
  • Stats — last run time, diff %, load time
  • Actions — View detail, Run now, Pause/Resume, Delete

Plan limits

PlanMonitorsMin intervalSnapshot retention
Free0
Starter324h7 days
Growth106h30 days
Business501h90 days
EnterpriseUnlimited15 min1 year

Monitor settings

When creating a monitor, you can configure:

SettingDefaultDescription
urlPage to monitor
nameFriendly label (e.g. "Homepage")
interval_minutes1440Check frequency
width1280Viewport width
height720Viewport height
full_pagefalseCapture full scrollable page
dark_modefalseEmulate dark color scheme
hide_selectorsCSS selectors to hide (e.g. .cookie-banner)
diff_threshold5Min % change to trigger notifications (0–100)
notify_emailtrueEmail notification on change
notify_webhooktrueWebhook event on change

Notifications

Email

Receive an email when a visual change exceeds your threshold:

Subject: ⚠️ Homepage changed (12% diff)

Visual change detected
"Homepage" has changed by 12%.
[View diff in dashboard →]

Webhook

A monitor.changed event is sent to all active webhooks:

{
  "event": "monitor.changed",
  "timestamp": "2026-03-27T14:23:00Z",
  "data": {
    "monitor_id": "uuid",
    "monitor_name": "Homepage",
    "url": "https://example.com",
    "diff_percent": 12
  }
}

Diff view modes

The detail page supports four viewing modes:

ModeDescription
AfterCurrent screenshot only
BeforePrevious screenshot
Side by sideBoth screenshots side by side
DiffRed pixel overlay showing changed areas

Maintenance windows

Schedule recurring maintenance windows to suppress false-positive alerts during deploys or planned downtime.

Maintenance windows are stored in a single maintenance_windows JSONB field as an array of window objects:

[
  {
    "label": "Deploy window",
    "days": [1, 2, 3, 4, 5],
    "start": "02:00",
    "end": "04:00",
    "tz": "UTC"
  }
]
FieldTypeDescription
labelstringOptional name for the window
daysnumber[]Days of the week (0 = Sunday, 6 = Saturday)
startstringStart time in HH:MM format
endstringEnd time in HH:MM format
tzstringTimezone (default: UTC)

You can define multiple windows. Runs that fall within any maintenance window are still executed and stored, but notifications are suppressed and the diff is not counted as a "change" event.

Hide selectors

Exclude dynamic page elements from visual comparison to reduce false positives.

Configure hide_selectors with one or more CSS selectors. These elements are set to display: none before the screenshot is taken:

{
  "hide_selectors": [".cookie-banner", "#chat-widget", ".dynamic-ad"]
}

Common use cases:

  • Cookie consent banners
  • Live chat widgets
  • Ad placements
  • Timestamp or counter elements
  • A/B test variants

Threshold configuration

Fine-tune the diff_threshold (0–100) to control notification sensitivity.

ValueMeaning
0Notify on any pixel change
1–5High sensitivity — catches minor text or color changes
5–15Balanced — ignores sub-pixel rendering differences
15–50Low sensitivity — only major layout shifts trigger alerts
100Never notify (monitoring only, no alerts)

The threshold applies to the percentage of pixels that differ between consecutive screenshots.

Export

Export monitor data for reporting and integration with external tools.

From the monitor detail page, click Export to download:

FormatContents
CSVTimestamped rows with diff %, load time, and status for each run
JSONFull run history with metadata
PDFVisual report with screenshot timeline and diff highlights

API endpoint: GET /api/monitors/{id}/export?format=csv

Public status page

Share a read-only status page with your team or clients.

Each monitor can generate a public status page with a unique shareable URL:

https://snapsharp.dev/status/{token}

The status page displays:

  • Current screenshot and status (up / changed / down)
  • Uptime percentage over the last 7 / 30 / 90 days
  • Screenshot timeline with change indicators
  • No login required — anyone with the link can view

Enable it from the monitor settings by toggling Public status page and copying the generated link.

Auto-disable

If a monitor fails 5 consecutive times, it is automatically paused and you receive an email notification. Re-enable it from the dashboard after verifying the URL is accessible.

Storage

Screenshots are stored on the server at /app/storage/monitors/{monitorId}/{timestamp}.png. Thumbnails (300px wide) are generated for the timeline view. Diff overlay images are stored only when changes are detected.

Old snapshots beyond your plan's retention period are automatically deleted daily at 3 AM UTC.