Tutorial

How to Detect Visual & Structural Changes on a Website

Set up automated change detection using SnapAPI monitors. Each snapshot captures pixel diff percentage plus — with analyze:true — structural changes: CTA rewrites, technology additions, H1 changes, word count shifts, and more.

Steps

Create a monitor with analyze enabledPOST to /v1/monitors with the URL, interval, and params.analyze:true. SnapAPI captures a screenshot and runs DOM analysis on every cycle — in the same browser session, no extra cost.
Read visual diff dataEach snapshot includes changed (boolean) and diff_percent (0–100). A 5% diff means 5% of pixels changed. Changed is also set true on any structural change even if pixels look similar.
Read structural diff dataWhen analyze:true, snapshots include structural_changes — an object showing exactly what changed: primary_cta before/after, technologies added/removed, H1 rewrite, word count shift, forms added or removed.
Receive webhook notificationsAdd a webhook_url and SnapAPI POSTs a rich payload on every capture — including structural_changes and the full analysis object when analyze is enabled.

Code Examples

# Create a monitor with structural analysis enabled
curl -X POST "https://snapapi.tech/v1/monitors" \
  -H "x-api-key: YOUR_KEY" -H "Content-Type: application/json" \
  -d '{"url":"https://competitor.com","name":"Competitor","interval_minutes":60,"webhook_url":"https://yourapp.com/hooks/snap","params":{"analyze":true}}'

# List snapshots — each includes changed, diff_percent, and structural_changes
curl "https://snapapi.tech/v1/monitors/MONITOR_ID/snapshots" \
  -H "x-api-key: YOUR_KEY"

// Create a monitor with structural analysis
const monitor = await fetch("https://snapapi.tech/v1/monitors", {
  method: "POST",
  headers: { "x-api-key": "YOUR_KEY", "Content-Type": "application/json" },
  body: JSON.stringify({
    url: "https://competitor.com/pricing",
    name: "Competitor Pricing",
    interval_minutes: 60,
    webhook_url: "https://yourapp.com/webhooks/changes",
    params: { analyze: true }
  })
}).then(r => r.json());

// Poll snapshots — check both visual and structural changes
const { snapshots } = await fetch(
  `https://snapapi.tech/v1/monitors/${monitor.id}/snapshots`,
  { headers: { "x-api-key": "YOUR_KEY" } }
).then(r => r.json());

snapshots.filter(s => s.changed).forEach(s => {
  const sc = s.meta?.structural_changes;
  console.log(`${s.taken_at}: ${s.meta?.diff_percent?.toFixed(1)}% visual diff`);
  if (sc?.primary_cta) console.log(`  CTA changed: "${sc.primary_cta.before}" → "${sc.primary_cta.after}"`);
  if (sc?.technologies) console.log(`  Tech added: ${sc.technologies.added.join(", ")}`);
});

import requests

HEADERS = {"x-api-key": "YOUR_KEY"}
BASE = "https://snapapi.tech"

# Create a monitor with structural analysis
monitor = requests.post(f"{BASE}/v1/monitors", headers=HEADERS, json={
    "url": "https://competitor.com",
    "name": "Competitor Monitor",
    "interval_minutes": 60,
    "params": {"analyze": True}
}).json()

# Check snapshots for visual + structural changes
result = requests.get(
    f"{BASE}/v1/monitors/{monitor['id']}/snapshots",
    headers=HEADERS
).json()

for snap in result["snapshots"]:
    meta = snap.get("meta", {})
    if meta.get("changed"):
        print(f"Change at {snap['taken_at']}: {meta.get('diff_percent', 0):.1f}% visual diff")
        sc = meta.get("structural_changes", {})
        if sc.get("primary_cta"):
            print(f"  CTA: '{sc['primary_cta']['before']}' → '{sc['primary_cta']['after']}'")
        if sc.get("technologies"):
            print(f"  Tech added: {sc['technologies']['added']}")

Get Free API Key Full API Docs

How to Detect Visual & Structural Changes on a Website

Steps

Code Examples

More Tutorials