# Monitor Website Visual Changes with Screenshot Diffs

**Use case:** 

Monitor one stable public sample page for pixel-level visual changes. Replace the sample URL and external ID, then keep this Task and its capture settings unchanged. The first successful run creates a BASELINE; later runs return UNCHANGED or VISUAL_CHANGE with a change ratio, changed regions, and an optional highlighted diff.

## Input

```json
{
  "urls": [
    {
      "url": "https://example.com",
      "externalId": "sample-homepage"
    }
  ],
  "mode": "monitor",
  "fullPage": false,
  "viewport": {
    "width": 1440,
    "height": 900
  },
  "waitUntil": "networkidle",
  "delayMs": 500,
  "navigationTimeoutMs": 45000,
  "scrollForLazyLoad": false,
  "ignoreSelectors": [],
  "hideSelectors": [],
  "changeThreshold": 0.01,
  "saveDiffImage": true,
  "proxyConfiguration": {
    "useApifyProxy": false
  }
}
```

## Output

```json
{
  "external_id": {
    "label": "Your ID",
    "format": "string"
  },
  "status": {
    "label": "Capture status",
    "format": "string"
  },
  "change_type": {
    "label": "Visual change",
    "format": "string"
  },
  "change_percentage": {
    "label": "Changed pixel ratio",
    "format": "number"
  },
  "requested_url": {
    "label": "Requested URL",
    "format": "string"
  },
  "previous_screenshot_url": {
    "label": "Compared screenshot",
    "format": "string"
  },
  "screenshot_url": {
    "label": "Current screenshot",
    "format": "string"
  },
  "diff_image_url": {
    "label": "Highlighted diff image",
    "format": "string"
  },
  "changed_regions": {
    "label": "Changed regions",
    "format": "array"
  },
  "scraped_at": {
    "label": "Observed at",
    "format": "string"
  }
}
```

## About this Actor

This example demonstrates how to use [Website Screenshot & Visual Change Monitor](https://apify.com/automa-flow/website-screenshot-visual-monitor.md) with a specific input configuration. Visit the [Actor detail page](https://apify.com/automa-flow/website-screenshot-visual-monitor.md) to learn more, explore other use cases, and run it yourself.


## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
This Task's input is already configured above — use it as-is rather than inventing a new one.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For full API examples (JavaScript, Python, CLI, MCP, OpenAPI), see this Task's Actor page: https://apify.com/automa-flow/website-screenshot-visual-monitor.md

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).