Guide

n8n Screenshot Integration: Self-Hosted Automation for Screenshots

A comprehensive guide to integrating screenshots with n8n workflows. Perfect for teams wanting self-hosted automation with full control.

Asad AliJanuary 6, 20268 min read

n8n is an open-source, self-hostable workflow automation platform. Unlike Zapier or Make.com, you can run n8n on your own infrastructure with unlimited executions. This makes it ideal for screenshot automation workflows that need scale without per-execution costs.

Why n8n for Screenshot Automation?

Self-Hosted Benefits

Feature Cloud Tools n8n Self-Hosted
Monthly cost $20-300+ Infrastructure only
Execution limits Capped per tier Unlimited
Data privacy Third-party servers Your servers
Customization Limited Full control
API integrations Marketplace only Any HTTP endpoint

When to Choose n8n

n8n is ideal when you need:

  • High volume: Thousands of screenshots monthly
  • Data privacy: Sensitive URLs or authenticated pages
  • Custom logic: Complex conditional workflows
  • Cost control: No per-execution pricing
  • Full ownership: Run on your infrastructure

Setup

Installing n8n

Docker (recommended):

docker run -it --rm \
  -p 5678:5678 \
  -v ~/.n8n:/home/node/.n8n \
  n8nio/n8n

npm:

npm install n8n -g
n8n start

Access n8n at http://localhost:5678

Creating Your First Screenshot Workflow

  1. Click Add Workflow
  2. Give wor workflow a name: "Screenshot Capture"
  3. Add nodes as described below

Basic Screenshot Node

HTTP Request Node Configuration

Add an HTTP Request node with these settings:

Method: POST

URL: https://api.screenshotly.app/screenshot

Authentication: Header Auth

  • Name: Authorization
  • Value: Bearer YOUR_API_KEY

Body Content Type: JSON

Body Parameters:

{
  "url": "https://example.com",
  "device": "desktop",
  "format": "png"
}

Options:

  • Response Format: File
  • Output Binary Data: ON

Handling the Response

The HTTP Request node returns binary image data. Connect it to:

  • Write Binary File: Save locally
  • S3: Upload to AWS
  • Google Drive: Save to cloud
  • Email: Send as attachment

Workflow Examples

Workflow 1: Scheduled Competitor Monitoring

Capture competitor websites daily and store in S3.

Nodes:

Schedule Trigger (Every day at 9AM)
    ↓
HTTP Request (competitor-1.com)
    ↓
HTTP Request (competitor-2.com)
    ↓
HTTP Request (competitor-3.com)
    ↓
S3 (Upload all screenshots)
    ↓
Slack (Notify team)

Schedule Trigger Configuration:

  • Mode: Every Day
  • Hour: 9
  • Minute: 0

HTTP Request (Screenshot):

{
  "url": "https://competitor.com",
  "device": "desktop",
  "format": "png",
  "fullPage": true,
  "aiRemoval": {
    "enabled": true,
    "types": ["cookie-banner", "chat-widget"]
  }
}

S3 Upload:

  • Bucket: screenshots
  • File Name: competitors/{{$now.format('yyyy-MM-dd')}}/competitor-1.png

Workflow 2: Webhook-Triggered Capture

Capture screenshots on-demand via webhook.

Nodes:

Webhook (POST /capture)
    ↓
HTTP Request (Screenshotly)
    ↓
Respond to Webhook (return image URL)

Webhook Node:

  • HTTP Method: POST
  • Path: /capture
  • Response Mode: Last Node

HTTP Request:

{
  "url": "={{$json.url}}",
  "device": "={{$json.device || 'desktop'}}",
  "format": "png"
}

Usage:

curl -X POST http://your-n8n:5678/webhook/capture \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}'

Workflow 3: Batch URL Processing

Process a list of URLs from a spreadsheet.

Nodes:

Manual Trigger
    ↓
Google Sheets (Read URLs)
    ↓
Split In Batches (5 at a time)
    ↓
HTTP Request (Screenshotly)
    ↓
Google Drive (Upload)
    ↓
Google Sheets (Update status)

Split In Batches:

  • Batch Size: 5 (prevents rate limiting)

HTTP Request:

{
  "url": "={{$json.url}}",
  "device": "desktop",
  "format": "png"
}

Workflow 4: Social Media Preview Generation

When a new blog post is published, generate social preview.

Nodes:

RSS Feed Trigger
    ↓
HTTP Request (Screenshotly with mockup)
    ↓
Dropbox (Save image)
    ↓
Twitter (Post with image)

HTTP Request:

{
  "url": "={{$json.link}}",
  "device": "desktop",
  "format": "png",
  "viewport": {
    "width": 1200,
    "height": 630
  },
  "mockup": {
    "type": "browser-dark",
    "shadow": true
  }
}

Workflow 5: Visual Regression Testing

Compare screenshots for changes.

Nodes:

Schedule Trigger
    ↓
HTTP Request (Capture current)
    ↓
Read Binary File (Previous capture)
    ↓
Function (Compare images)
    ↓
IF (Changed?)
    ↓
Email (Alert on changes)

Function Node (Compare):

// Simple size comparison - for demo purposes
const current = $binary.data.fileSize;
const previous = items[1].binary.data.fileSize;

const percentChange = Math.abs(current - previous) / previous * 100;

return [{
  json: {
    changed: percentChange > 5,
    percentChange: percentChange.toFixed(2)
  }
}];

Advanced Patterns

Dynamic URL Lists

Process URLs from various sources:

From Database:

PostgreSQL Node
    ↓
Split In Batches
    ↓
HTTP Request (Screenshot)

From API:

HTTP Request (Get URLs from your API)
    ↓
Split In Batches
    ↓
HTTP Request (Screenshot)

Error Handling

Add error handling with the Error Trigger node:

Main Workflow
    ↓
HTTP Request
    ↓ (on error)
Error Trigger
    ↓
Log to Database
    ↓
Slack Alert

Retry Logic: In HTTP Request settings:

  • Retry On Fail: ON
  • Max Tries: 3
  • Wait Between Tries: 1000ms

Parallel Processing

n8n processes items in parallel by default. Control concurrency:

Settings > Workflow Settings:

  • Execute Once: OFF (process each item)

Split In Batches:

  • Batch Size: 10 (parallel limit)

Authentication for Private Pages

Pass session cookies for authenticated captures:

{
  "url": "https://app.example.com/dashboard",
  "device": "desktop",
  "format": "png",
  "cookies": [
    {
      "name": "session_token",
      "value": "={{$json.session}}",
      "domain": "app.example.com"
    }
  ]
}

Integration Patterns

Save to Cloud Storage

AWS S3:

HTTP Request (Screenshot)
    ↓
S3 (Upload File)

Google Cloud Storage:

HTTP Request (Screenshot)
    ↓
Google Cloud Storage (Upload)

Azure Blob:

HTTP Request (Screenshot)
    ↓
Microsoft Azure Blob Storage

Notify Team

Slack with Image:

HTTP Request (Screenshot)
    ↓
S3 (Upload, get public URL)
    ↓
Slack (Send message with image URL)

Email Attachment:

HTTP Request (Screenshot)
    ↓
Email Send (SMTP)
    with binary attachment

Store Metadata

Airtable:

HTTP Request (Screenshot)
    ↓
S3 (Upload)
    ↓
Airtable (Create record with URL, timestamp)

PostgreSQL:

HTTP Request (Screenshot)
    ↓
S3 (Upload)
    ↓
PostgreSQL (INSERT capture record)

Credentials Management

Setting Up Screenshotly Credentials

  1. Go to Credentials in n8n
  2. Click Add Credential
  3. Select Header Auth
  4. Configure:
    • Name: Screenshotly API
    • Name: Authorization
    • Value: Bearer YOUR_API_KEY

Now use this credential in all HTTP Request nodes.

Environment Variables

For production, use environment variables:

export SCREENSHOTLY_API_KEY="your_api_key"

Reference in n8n:

{{$env.SCREENSHOTLY_API_KEY}}

Production Deployment

Docker Compose

version: '3.8'
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=admin
      - N8N_BASIC_AUTH_PASSWORD=secure_password
      - SCREENSHOTLY_API_KEY=${SCREENSHOTLY_API_KEY}
    volumes:
      - n8n_data:/home/node/.n8n
    restart: unless-stopped

volumes:
  n8n_data:

Kubernetes

apiVersion: apps/v1
kind: Deployment
metadata:
  name: n8n
spec:
  replicas: 1
  selector:
    matchLabels:
      app: n8n
  template:
    metadata:
      labels:
        app: n8n
    spec:
      containers:
      - name: n8n
        image: n8nio/n8n
        ports:
        - containerPort: 5678
        env:
        - name: SCREENSHOTLY_API_KEY
          valueFrom:
            secretKeyRef:
              name: screenshotly-secret
              key: api-key

Monitoring

Monitor your n8n instance:

  1. Execution History: View in n8n UI
  2. Prometheus Metrics: Enable with N8N_METRICS=true
  3. Error Alerts: Use Error Trigger workflows

Best Practices

1. Use Credentials

Never hardcode API keys. Use n8n's credential management.

2. Add Delays

Prevent rate limiting with delays between requests:

HTTP Request
    ↓
Wait (1 second)
    ↓
Next iteration

3. Log Everything

Create an audit trail:

HTTP Request
    ↓
PostgreSQL (Log capture attempt)

4. Handle Failures Gracefully

Always have error handling:

  • Retry logic in HTTP node
  • Error Trigger workflow for alerts
  • Fallback images for failed captures

5. Use Batching

Process in batches to control resource usage:

  • Split In Batches node
  • Reasonable batch sizes (5-10)
  • Delays between batches

Troubleshooting

Common Issues

"Connection refused":

  • Check n8n is running
  • Verify port 5678 is accessible
  • Check Docker networking

"Timeout":

  • Increase HTTP Request timeout
  • Check if target URL is accessible
  • Add longer delays between requests

"Binary data not found":

  • Ensure "Response Format" is set to "File"
  • Enable "Output Binary Data"

"Rate limited":

  • Add delays between requests
  • Reduce batch sizes
  • Consider upgrading API plan

Conclusion

n8n provides powerful, self-hosted screenshot automation without per-execution costs. Key advantages:

  • Unlimited executions on your infrastructure
  • Full data control for sensitive workflows
  • Deep customization with Function nodes
  • Enterprise ready with proper deployment

Whether monitoring competitors, generating social previews, or automating documentation, n8n + Screenshotly delivers scalable screenshot workflows.


Ready to build screenshot workflows?

Get your free API key → - 100 free screenshots to get started.

See also:

n8n
no-code
automation
self-hosted
integrations

About the Author

Asad Ali

Asad Ali

Full-Stack Developer and Founder of ZTabs with 8+ years of experience building scalable web applications and APIs. Specializes in performance optimization, SaaS development, and modern web technologies.

Credentials: Founder & CEO at ZTabs, Full-Stack Developer, Expert in Next.js, React, Node.js, and API optimization

Ready to capture your first screenshot?

Get started with 100 free screenshots. No credit card required.

Related Articles