website-monitor/actions.md

Website Change Detection Monitor - User Actions & Workflows

Primary Use Cases

1. Job Seeker Monitoring Career Pages

Goal: Get notified immediately when new positions are posted

User Story: As a job seeker, I want to monitor company career pages so I can apply to new positions before they fill up.

Workflow:

1. User signs up for account
2. User adds company career page URL (e.g., https://careers.company.com/jobs)
3. User sets frequency to every 5 minutes
4. User enables keyword alert: "Senior Developer" appears
5. System checks page every 5 minutes
6. When new job matching keyword appears, user receives instant email
7. User clicks link in email to see diff
8. User sees new job listing highlighted
9. User applies to job before competitors

Success Metrics:

• Time from job posted to alert received (<10 min)
• False positive rate (<5%)
• Alert open rate (>60% for job alerts)

---

2. E-commerce Price Tracker

Goal: Buy products when they go on sale

User Story: As a shopper, I want to track product prices so I can purchase when the price drops.

Workflow:

1. User adds product page URL
2. User selects price element using visual picker
3. User sets frequency to 6 hours
4. User enables keyword alert: "$" followed by any number less than $100
5. System monitors only the price element
6. When price drops below $100, user receives alert
7. User clicks through and purchases product
8. User pauses or deletes monitor

Success Metrics:

• Accurate price change detection (>95%)
• No false alerts from currency formatting
• Purchase completion rate (>30%)

---

3. Competitor Website Monitoring

Goal: Stay informed about competitor product launches and changes

User Story: As a product manager, I want to track competitor websites so I can respond quickly to their changes.

Workflow:

1. User creates folder: "Competitors"
2. User adds 5 competitor product pages
3. User sets frequency to 24 hours
4. User enables digest mode (daily summary)
5. User adds ignore rules for dates/timestamps
6. User enables keyword alerts: "new", "launch", "announcement"
7. System sends daily digest at 9 AM
8. User reviews all changes in one email
9. User shares relevant changes with team

Success Metrics:

• Comprehensive change capture (>90%)
• Low noise-to-signal ratio
• Digest open rate (>40%)

---

4. Stock/Availability Tracking

Goal: Purchase limited-availability items when back in stock

User Story: As a collector, I want to monitor product pages so I can buy when items restock.

Workflow:

1. User adds product URL
2. User enables keyword alert: "In Stock" appears OR "Out of Stock" disappears
3. User sets frequency to 1 minute (paid plan)
4. System detects "Out of Stock" → "In Stock" change
5. User receives instant SMS alert (via webhook to Twilio)
6. User purchases item within minutes
7. Monitor auto-pauses after alert (optional setting)

Success Metrics:

• Detection speed (<2 min from restock)
• Alert delivery reliability (>99.9%)
• Successful purchase rate (>50%)

---

5. Government/Policy Page Monitoring

Goal: Track changes to regulations and official announcements

User Story: As a compliance officer, I want to monitor regulatory websites so I can stay compliant with new rules.

Workflow:

1. User adds multiple government URLs
2. User sets frequency to 12 hours
3. User enables AI summaries for change descriptions
4. User sets up Slack integration for team notifications
5. System detects policy change
6. AI generates summary: "Updated visa processing timeline from 3 months to 6 months"
7. Alert sent to Slack #compliance channel
8. Team reviews full diff and takes action

Success Metrics:

• Summary accuracy (>90% useful)
• Zero missed critical changes
• Team engagement with alerts

---

6. Website Uptime & Error Monitoring

Goal: Know immediately when website has issues

User Story: As a website owner, I want to monitor my site's status so I can fix issues before customers complain.

Workflow:

1. User adds own website URL
2. User sets frequency to 5 minutes
3. User enables alerts for HTTP errors (404, 500, timeout)
4. Website goes down (returns 500)
5. System attempts 3 retries
6. After 3 failures, user receives critical alert
7. User investigates and fixes issue
8. User receives "recovery" alert when site is back

Success Metrics:

• Detection speed (<5 min)
• False positive rate (<1%)
• Mean time to resolution improvement

---

7. Content Publisher Monitoring

Goal: Track when favorite blogs/news sites publish new content

User Story: As a researcher, I want to monitor multiple blogs so I don't miss important articles.

Workflow:

1. User adds 10 blog URLs
2. User uses element selector to monitor article list only
3. User sets frequency to 1 hour
4. User enables weekly digest
5. System detects new articles across all monitored blogs
6. User receives one weekly email with all updates
7. User clicks through to read new content
8. User adds RSS feed option for feed reader

Success Metrics:

• Complete article detection (>98%)
• Low false positives from dates/ads
• Content discovery value

---

8. Real Estate Listing Monitoring

Goal: Find new property listings immediately

User Story: As a home buyer, I want to monitor real estate sites so I can schedule viewings for new listings quickly.

Workflow:

1. User adds real estate search results URL
2. User sets frequency to 15 minutes
3. User enables keyword alerts: city name + "new listing"
4. User ignores "last updated" timestamps
5. New property appears matching criteria
6. User receives alert with visual diff showing new listing
7. User contacts agent same day
8. User has competitive advantage

Success Metrics:

• New listing detection speed (<30 min)
• Accurate keyword filtering
• User viewing conversion (>40%)

---

Core User Workflows

Account Management

Sign Up

1. User visits landing page
2. User clicks "Start Free Trial"
3. User enters email and password
4. User receives verification email (optional)
5. User lands on dashboard

Upgrade Account

1. User hits free plan limit (5 monitors)
2. System shows upgrade prompt
3. User clicks "Upgrade to Pro"
4. User reviews plan features and pricing
5. User enters payment info (Stripe)
6. User confirms subscription
7. User can now create 50 monitors

Manage Subscription

1. User navigates to Account Settings
2. User views current plan and usage
3. User can:
   • Upgrade/downgrade plan
   • Update payment method
   • View invoice history
   • Cancel subscription
4. Changes take effect at billing cycle

---

Monitor Creation & Management

Quick Add Monitor (Simple)

1. User clicks "Add Monitor"
2. User pastes URL
3. User enters optional name
4. User selects frequency from dropdown
5. User clicks "Start Monitoring"
6. System performs first check immediately
7. User sees monitor in list with "Checking..." status

Advanced Monitor Setup

1. User clicks "Add Monitor"
2. User pastes URL
3. User clicks "Advanced Options"
4. User configures:
   • Element selector: Uses visual picker to select specific content area
   • Ignore rules: Adds CSS selectors or text patterns to ignore
   • Keywords: Sets up keyword appear/disappear alerts
   • Alert settings: Chooses email + Slack, sets quiet hours
5. User previews what will be monitored
6. User saves monitor
7. System schedules first check

Edit Monitor

1. User clicks monitor from list
2. User clicks "Edit Settings"
3. User modifies settings (frequency, selectors, keywords)
4. User clicks "Save Changes"
5. System applies changes to next check

Pause/Resume Monitor

1. User clicks monitor actions menu
2. User clicks "Pause"
3. Monitor status changes to "Paused"
4. No checks are performed
5. User can resume anytime

Delete Monitor

1. User clicks monitor actions menu
2. User clicks "Delete"
3. System shows confirmation: "This will delete all history. Continue?"
4. User confirms
5. Monitor and all snapshots are deleted

---

Viewing Changes & History

Browse History

1. User clicks monitor name
2. User sees timeline of all checks
3. Each entry shows:
   • Timestamp
   • Status (changed/unchanged/error)
   • Change indicator (size of change)
4. User can filter: "Only changes" or "Include errors"
5. User scrolls through history

View Specific Change

1. User clicks a "changed" entry in timeline
2. User sees diff viewer with:
   • Before and after snapshots
   • Highlighted changes (red = removed, green = added)
   • Line numbers
   • View options (side-by-side or unified)
3. User can:
   • Download snapshot
   • Share diff link
   • Mark as reviewed

Compare Non-Sequential Snapshots

1. User browses history
2. User selects two snapshots to compare
3. User clicks "Compare Selected"
4. System shows diff between those two points in time
5. Useful for seeing cumulative changes

Search History

1. User enters search term in history
2. System searches snapshot content
3. Results show snapshots containing search term
4. User can jump to specific time period

---

Alert Management

View Alerts

1. User navigates to Alerts page
2. User sees list of all alerts (read and unread)
3. Each alert shows:
   • Monitor name
   • Alert type (change detected, error, keyword match)
   • Timestamp
   • Quick preview
4. User can filter by status, monitor, or date

Configure Alert Settings

1. User edits monitor
2. User clicks "Alert Settings" tab
3. User configures:
   • Channels: Email, Slack, webhook
   • Frequency: Every change or digest
   • Quiet hours: 10 PM - 7 AM
   • Severity: Only major changes
4. User saves settings

Set Up Integrations

1. User navigates to Integrations page
2. User clicks "Connect Slack"
3. User authorizes app via OAuth
4. User selects channel
5. User maps monitors to channels
6. User tests integration
7. Future alerts now go to Slack

---

Organization & Bulk Actions

Create Folders

1. User clicks "New Folder"
2. User names folder (e.g., "Competitors")
3. User drags monitors into folder
4. Monitors are organized by folder

Add Tags

1. User selects monitor
2. User clicks "Add Tag"
3. User types tag name or selects existing
4. Monitor is tagged
5. User can filter by tag

Bulk Import

1. User clicks "Import Monitors"
2. User uploads CSV file with columns: URL, Name, Frequency
3. System validates URLs
4. System shows preview
5. User confirms import
6. System creates all monitors

Bulk Actions

1. User selects multiple monitors (checkbox)
2. User clicks "Bulk Actions"
3. User chooses action:
   • Pause all
   • Resume all
   • Change frequency
   • Add to folder
   • Delete all
4. User confirms
5. Action applies to all selected

---

Collaboration (Team Plans)

Invite Team Member

1. User navigates to Team Settings
2. User clicks "Invite Member"
3. User enters email and selects role (Admin/Editor/Viewer)
4. User sends invitation
5. Invitee receives email
6. Invitee accepts and joins team
7. Invitee sees shared monitors

Assign Monitor

1. User opens monitor details
2. User clicks "Assign to"
3. User selects team member
4. Team member receives notification
5. Monitor appears in their assigned list

Comment on Changes

1. User views a change diff
2. User clicks "Add Comment"
3. User types comment: "This is a critical pricing change"
4. User mentions teammate: @john
5. John receives notification
6. John replies to comment
7. Conversation thread created

---

User Onboarding Flow

First-Time User Experience

Step 1: Welcome

• User lands on dashboard
• Welcome modal appears: "Let's create your first monitor!"
• Option to take tour or skip

Step 2: First Monitor

• Guided form appears
• Pre-filled example: A popular job board URL
• User can replace with own URL
• Frequency auto-selected (30 min)
• "Create Monitor" button prominent

Step 3: First Check

• Loading animation: "Checking page for the first time..."
• Success message: "Monitor created! We'll check every 30 minutes."
• Visual showing what was captured

Step 4: Explore Features

• Checklist appears:
  • ✅ Create first monitor
  • ⬜ Set up keyword alert
  • ⬜ Configure ignore rules
  • ⬜ Connect Slack
  • ⬜ Invite team member
• Tooltips guide user through interface

Step 5: First Alert

• User receives first alert (real or simulated for demo)
• Email includes tips: "Here's how to read your diff..."
• In-app notification tutorial

---

Advanced User Actions

Using Visual Element Picker

1. User edits monitor
2. User clicks "Select Element"
3. System loads page in embedded iframe
4. User hovers over elements (they highlight)
5. User clicks desired element
6. System shows element path and preview
7. User confirms selection
8. Only that element is monitored

Creating Custom Ignore Rules

1. User notices noisy changes (dates, ads)
2. User opens ignore rules
3. User adds rule:
   • Type: CSS Selector
   • Value: .cookie-banner, .timestamp
4. User tests rule on previous snapshots
5. Preview shows filtered diff (noise removed)
6. User saves rule

Setting Up Webhook

1. User navigates to Integrations
2. User clicks "Add Webhook"
3. User enters:
   • URL: https://myservice.com/webhook
   • Method: POST
   • Headers: API key
4. User tests webhook
5. System sends test payload
6. User confirms receipt
7. Webhook is active

Exporting Data

1. User navigates to monitor
2. User clicks "Export"
3. User selects:
   • Date range
   • Format (JSON, CSV, PDF)
   • Include snapshots (yes/no)
4. User clicks "Export"
5. System generates file
6. User downloads export

---

Error Handling Flows

Monitor Fails to Load

1. System detects timeout/error
2. System retries 3 times
3. After 3 failures, user receives alert: "Unable to check [URL]: Timeout"
4. User clicks to view error details
5. User sees error log and status code
6. User can:
   • Retry manually
   • Adjust timeout settings
   • Contact support

Robot/CAPTCHA Detection

1. System detects CAPTCHA challenge
2. User receives alert: "This page requires CAPTCHA"
3. User options:
   • Enable JS rendering (headless browser)
   • Add authentication
   • Contact support for residential proxy option

False Positive Alert

1. User receives alert for irrelevant change
2. User views diff and sees it's just an ad rotation
3. User clicks "This wasn't useful"
4. User adds ignore rule for that element
5. System learns from feedback
6. Future checks apply ignore rule

---

Mobile Experience (Future)

Mobile Alerts

1. User receives push notification on phone
2. Notification shows: "[Monitor Name] changed"
3. User taps notification
4. Mobile-optimized diff view opens
5. User can swipe between before/after
6. User can mark as reviewed

Quick Monitor Addition

1. User browses web on mobile
2. User uses share menu: "Monitor with [App Name]"
3. URL auto-fills in app
4. User taps "Start Monitoring"
5. Monitor created with default settings

---

Support & Help Actions

Getting Help

1. User clicks help icon
2. User can:
   • Search knowledge base
   • Watch video tutorials
   • Chat with support
   • Email support
3. Contextual help based on current page

Reporting Issues

1. User encounters bug
2. User clicks "Report Issue"
3. Form auto-fills: browser, page, user ID
4. User describes issue
5. User can attach screenshot
6. Ticket created
7. Support responds within 24h

---

Analytics & Insights (Future Feature)

Personal Analytics Dashboard

1. User navigates to "Insights"
2. User sees:
   • Total monitors
   • Changes detected this month
   • Most active monitors
   • Alert response rate
3. User can filter by date range
4. User exports report

Change Trends

1. User views monitor details
2. User sees "Trends" tab
3. Graph shows frequency of changes over time
4. User identifies patterns (e.g., "Changes every Monday")
5. User adjusts check frequency accordingly