Visual monitoring

Visual monitors watch how a page looks. On every check, Verid renders the page in a real browser, captures a screenshot, and compares it pixel by pixel against the previous one. If the changed area reaches your threshold, the alert fires with links to the before, after, and red-highlight diff images.

They're a separate monitor type from structured (extraction) monitors: no selectors, no predicates - just a URL, an optional region, and a sensitivity. Use a structured monitor when you care about a value; use a visual monitor when layout, imagery, or design is the signal. Run one of each on the same URL when you want both.

Creating one

Dashboard - go to Visual monitors → New visual monitor. Paste the URL; Verid renders the page and shows a clickable screenshot: click a section to watch just that region, shift-click elements (ad slots, timestamps) to ignore them, pick an alert sensitivity, done.

API - a visual monitor is a regular monitor with visual_config set (advanced users can attach visual_config to any monitor, including one with real extraction and predicates):

{
  "name": "Competitor homepage",
  "url": "https://example.com",
  "extract_config": { "method": "full_page" },
  "visual_config": {
    "enabled": true,
    "thresholdPct": 5,
    "fullPage": true,
    "regions": [
      { "selector": "#hero", "label": "Hero section" }
    ],
    "ignoreSelectors": [".ad-slot", "#clock"]
  }
}

Configuration reference

Field	Type	Default	Meaning
`enabled`	boolean	-	Turns visual checks on for this monitor.
`thresholdPct`	number 0-100	`1`	Fire only when at least this percent of pixels changed. The dashboard presets High / Medium / Low map to 1% / 5% / 10%.
`fullPage`	boolean	`true`	Capture full scroll height vs. viewport only.
`regions`	array, max 20	`[]`	CSS selectors to screenshot and compare individually. Empty = whole page. Each region can carry a `label` shown in the UI and alerts.
`ignoreSelectors`	array, max 20	-	Elements hidden before the shot - ads, carousels, clocks.
`viewport`	`{width, height}`	1280x720	Browser viewport override.

How the comparison works

Capture - the page is rendered in a stealth headless browser; ignored elements are hidden, then each configured region (or the whole page) is screenshotted.
Compare - the new screenshot is compared against the previous run's using a pixel-level diff (anti-aliasing aware). Changed pixels are painted red into a diff overlay image.
Decide - the changed-area percentage is aggregated across regions. If it reaches thresholdPct, visual delivery triggers.

The visual trigger is independent of your diff_predicate - a run can fire because a field predicate passed, because pixels changed past the threshold, or both.

What alerts contain

Webhook, Slack, Discord, and email deliveries include signed URLs (valid 7 days) for the before, after, and diff images, plus the changed-pixel percentage per region. In the dashboard, every run with a visual check gets a viewer with three modes: a draggable slider curtain, side-by-side, and the diff overlay. The monitor's Visual tab shows screenshot history over time.

Retention and limits

Screenshots are kept for the most recent checks per monitor (default 10) and pruned automatically; older images are deleted from storage.
The number of visual monitors is plan-gated: Free includes 1, paid plans raise it.

When to use visual vs. extraction

You want to know...	Use
"Did the price drop more than 5%?"	Structured monitor + predicate
"Did the hero banner change?"	Visual monitor on `#hero`
"Did the value change, and what did the page look like?"	One of each on the same URL
"Did anything at all change on this page?"	Full-page hash (text) or a visual monitor with a low threshold (layout)

Text diffing can't see a swapped image or a layout shift; pixel diffing can't tell you the new price as data. They're complementary - keep both in your toolbox.

Quickstart Webhooks