How to Take Screenshots Automatically in Zapier

You're using Zapier to automate your business processes. You connect apps, trigger workflows, monitor web pages for changes. But you can't actually see what's happening on those pages.

What if you could add screenshots to your Zapier automations?

One Code step. One API call. Now your Zapier zaps capture visual proof.

Why Screenshots Matter in Zapier

Zapier is powerful for connecting 6,000+ apps and automating repetitive tasks. But much of what happens on the web is visual:

• Price monitoring: Did the price actually change? See it in the screenshot.
• Form submissions: Did the confirmation page appear? Proof in the screenshot.
• Status pages: Is the page down or just slow? Screenshot shows the state.
• Compliance: Visual record of what the page said when the zap ran.

Screenshots turn invisible automations into verifiable actions.

Setup: Code Step (Preferred Method)

Zapier has two ways to call APIs: the built-in HTTP action and the Code step. For binary responses (PNG screenshots), the Code step is better because it handles binary data natively.

Step 1: Add Code by Zapier Step

In your zap:

1. Click + to add an action
2. Search Code by Zapier
3. Select Code → Run Node.js

Step 2: Write the Code

In the Code step, write JavaScript using node-fetch:

const fetch = require('node-fetch');
const fs = require('fs');

const apiKey = 'YOUR_PAGEBOLT_API_KEY';
const url = 'https://example.com/page';

// Call PageBolt API
const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: url,
    format: 'png',
    width: 1280,
    height: 720
  })
});

if (!response.ok) {
  throw new Error(`API error: ${response.status}`);
}

// Handle binary response
const buffer = await response.arrayBuffer();
const base64 = Buffer.from(buffer).toString('base64');

return {
  screenshot_base64: base64,
  filename: `screenshot-${Date.now()}.png`,
  url: url,
  timestamp: new Date().toISOString()
};

This code:

1. Calls PageBolt API
2. Gets binary PNG data
3. Converts to base64 (for storing in Zapier data)
4. Returns screenshot data + metadata

Step 3: Use Dynamic Data

To use data from previous steps, add variables:

const url = inputData.pageUrl; // From previous step
const apiKey = process.env.PAGEBOLT_API_KEY; // Set in env

Set environment variables in Zapier:

1. Go to your Zapier account settings
2. Click Integrations → Code by Zapier
3. Add PAGEBOLT_API_KEY as an environment variable

Step 4: Store the Screenshot

Add a next step to store the screenshot:

Option 1: Google Drive

• File name: {{ screenshot_base64.filename }}
• File content: Convert base64 to file (use Zapier's "Utility" → "Format" step)

Option 2: AWS S3

• Use Zapier's S3 app
• Bucket: Your S3 bucket
• Key (path): screenshots/{{ screenshot_base64.filename }}
• File content: base64 decoded

Option 3: Dropbox

• File name: {{ screenshot_base64.filename }}
• File content: base64 decoded

Real Example: Daily Competitor Price Monitoring

Here's a complete Zapier zap that screenshots competitor pricing every morning:

Trigger:

• Schedule → Every day at 9:00 AM

Actions:

1. Code by Zapier → Run Node.js

   const fetch = require('node-fetch');

   const competitors = [
     'https://competitor1.com/pricing',
     'https://competitor2.com/pricing'
   ];

   const screenshots = [];

   for (const url of competitors) {
     const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`,
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         url: url,
         format: 'png',
         fullPage: true,
         blockBanners: true
       })
     });

     const buffer = await response.arrayBuffer();
     const base64 = Buffer.from(buffer).toString('base64');

     screenshots.push({
       url: url,
       screenshot: base64,
       timestamp: new Date().toISOString()
     });
   }

   return { screenshots };

1. Google Drive → Create Spreadsheet Row

   • Spreadsheet: "Price Monitoring"
   • Data: Add columns for each competitor, screenshot URL, timestamp

2. Gmail → Send Email

   • To: Your email
   • Subject: "Daily competitor price check"
   • Body: Screenshots attached

Now every morning, the zap:

1. Screenshots 2 competitors
2. Records data in Google Drive
3. Emails you the screenshots

You have a dated history of competitor pricing.

Use Case: Form Submission Capture

After a form submission, capture the confirmation page:

const fetch = require('node-fetch');

const formUrl = inputData.confirmationPageUrl; // From form submission

const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: formUrl,
    format: 'png',
    blockBanners: true,
    blockAds: true
  })
});

const buffer = await response.arrayBuffer();
const base64 = Buffer.from(buffer).toString('base64');

return {
  confirmation_screenshot: base64,
  order_id: inputData.orderId,
  timestamp: new Date().toISOString()
};

Store with order metadata in your database.

Use Case: Visual Audit Trail

Log what a page looked like during each step of a business process:

const fetch = require('node-fetch');

const steps = [
  { name: 'linkedin_check', url: 'https://linkedin.com/in/...'},
  { name: 'email_check', url: 'https://emailvalidation.com/...'},
  { name: 'credit_check', url: 'https://creditscore.com/...' }
];

const screenshots = [];

for (const step of steps) {
  const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: step.url,
      format: 'png'
    })
  });

  const buffer = await response.arrayBuffer();
  const base64 = Buffer.from(buffer).toString('base64');

  screenshots.push({
    step: step.name,
    screenshot: base64,
    timestamp: new Date().toISOString()
  });
}

return { audit_trail: screenshots };

Common PageBolt Parameters

Parameter	Example	Purpose
url	https://example.com	Page to screenshot
format	png	Always PNG
width	1280	Viewport width
height	720	Viewport height
fullPage	true	Capture entire page (including lazy-loaded content)
blockBanners	true	Hide cookie consent popups
blockAds	true	Remove advertisements
viewportDevice	iphone_14_pro	Mobile emulation

Error Handling in Zapier

Add error handling in your Code step:

try {
  const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
    // ... request config
  });

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  const buffer = await response.arrayBuffer();
  const base64 = Buffer.from(buffer).toString('base64');

  return { success: true, screenshot: base64 };
} catch (error) {
  return {
    success: false,
    error: error.message,
    retryable: error.message.includes('timeout')
  };
}

In your zap, add a conditional step:

• If success = false
• Then Send error notification to Slack

Zap Templates

Template 1: Daily Website Monitoring

Schedule (daily)
  ↓
Code: Screenshot competitor sites
  ↓
Store in Google Drive
  ↓
Email summary

Template 2: Form Automation with Proof

Webhook (form submitted)
  ↓
Code: Screenshot confirmation page
  ↓
Store in S3
  ↓
Update database
  ↓
Send confirmation email with screenshot

Template 3: Price Monitoring Pipeline

Schedule (hourly)
  ↓
Code: Loop through 5 URLs, screenshot each
  ↓
Store in Dropbox
  ↓
Alert if price changed
  ↓
Log to Google Sheets

Why Code Step Over HTTP Action?

Zapier's built-in HTTP action can call APIs, but it's designed for JSON responses. For binary data (like PNG screenshots), the Code step is better because:

• ✅ Handles binary responses natively
• ✅ No conversion complexity
• ✅ Use Buffer.from() directly
• ✅ More flexible error handling

Pricing

Plan	Requests/Month	Cost	Best For
Free	100	$0	Testing zaps
Starter	5,000	$29	Small monitoring
Growth	25,000	$79	Production zaps
Scale	100,000	$199	Enterprise automation

Summary

Screenshots in Zapier automations:

• ✅ Add Code by Zapier (Node.js) step
• ✅ Call PageBolt API with node-fetch
• ✅ Handle binary with Buffer.from()
• ✅ Store to Google Drive, S3, or Dropbox
• ✅ Use in monitoring, verification, audit trails
• ✅ 100+ requests/month free

Get started: Try PageBolt free — 100 requests/month, no credit card →