Pipedream Screenshot API Integration: Workflows with Code

The ScreenshotRun Pipedream screenshot API integration turns any workflow into a screenshot pipeline. One HTTP Request action sends a GET, the API returns the image. No headless browser to manage, no extra npm packages. The whole setup lives inside a workflow you can trigger from a webhook, a cron schedule, a Slack command, a new Google Sheets row, even a Stripe payment event.

Think of Pipedream as the code-friendly Zapier. Every step can be a visual action or a Node.js code block with full npm access. That flexibility matters when you need branching logic to handle different page types. Or loops for batch processing fifty URLs at once. Or real error handling that doesn't kill the whole workflow when one page times out.

Prerequisites for the Pipedream screenshot API setup

Two accounts. Register at ScreenshotRun to get your API key — the signup form takes about ten seconds. Then create a Pipedream account at pipedream.com. Both services have free tiers that cover most screenshot automation use cases without upgrading.

Store your API key in Pipedream's environment variables so it stays out of your workflow code. Go to Settings → Environment Variables, add a new variable called SCREENSHOTRUN_API_KEY with your key as the value. Every workflow in your account can reference it as process.env.SCREENSHOTRUN_API_KEY.

Capture a screenshot with Pipedream and Node.js

Create a new workflow. For the trigger, pick Manual Trigger (you can swap it for a schedule or webhook later). Add a new step, choose "Run Node.js code," and paste this:

import axios from "axios";
import fs from "fs";

export default defineComponent({
  async run({ steps, $ }) {
    const response = await axios({
      method: "GET",
      url: "https://api.screenshotrun.com/v1/screenshots/capture",
      params: {
        url: "https://github.com",
        format: "png",
        width: 1280,
        full_page: true,
        block_cookies: true,
      },
      headers: {
        Authorization: `Bearer ${process.env.SCREENSHOTRUN_API_KEY}`,
      },
      responseType: "arraybuffer",
    });

    // Export the image data for use in the next step
    $.export("screenshot", Buffer.from(response.data).toString("base64"));
    $.export("content_type", "image/png");
    $.export("size_kb", Math.round(response.data.length / 1024));

    return `Screenshot captured: ${response.data.length} bytes`;
  },
});

Click Test to run it. Pipedream executes the code and calls the ScreenshotRun API. The base64 image data lands in the step's exports, visible in the output panel. Every subsequent step can reference the screenshot as steps.your_step_name.screenshot.

Why responseType: "arraybuffer"? The ScreenshotRun API returns the image binary directly. Without that flag, axios tries to parse the response as JSON and chokes on the PNG bytes. This is the most common mistake when integrating screenshot APIs with Pipedream.

No-code screenshot capture with Pipedream's HTTP action

Prefer visual steps over code? Pipedream has a pre-built HTTP Request action that works without writing JavaScript.

Step 1. Add a new step and search for "HTTP Request." Select the built-in HTTP / Webhook action.

Step 2. Configure it:

• Method: GET
• URL: https://api.screenshotrun.com/v1/screenshots/capture
• Query parameters: add url = your target URL, format = png, width = 1280, full_page = true
• Headers: add Authorization = Bearer {{process.env.SCREENSHOTRUN_API_KEY}}

Step 3. Test the step. The response contains the raw image data. Downstream steps like Google Drive upload or a Slack message can use it directly.

The no-code approach works for simple captures. Once you need loops or conditional logic, switch to the Node.js code step.

Automate Slack screenshots on a daily schedule

Scheduled screenshot of a webpage, posted to a Slack channel every morning. We see this workflow more than any other. The setup takes three steps.

Trigger: Schedule Trigger, set to daily at 9:00 AM.

Step 1 (capture): Node.js code step that captures the screenshot. Use the code from the first example, but change the URL to whatever page you're monitoring.

Step 2 (post to Slack): Add a Slack action step. Choose "Send Message" or "Upload File." For file upload, pass the base64 buffer from the previous step:

import { WebClient } from "@slack/web-api";

export default defineComponent({
  async run({ steps, $ }) {
    const slack = new WebClient(process.env.SLACK_BOT_TOKEN);

    await slack.files.uploadV2({
      channel_id: "C0123456789", // your channel ID
      file: Buffer.from(steps.capture_screenshot.screenshot, "base64"),
      filename: `screenshot-${new Date().toISOString().split("T")[0]}.png`,
      title: "Daily website screenshot",
      initial_comment: "Morning capture of competitor homepage",
    });

    return "Posted to Slack";
  },
});

Every morning at 9, your team sees a fresh screenshot in the channel. If the competitor changes their pricing page overnight, you know about it before your first coffee.

Batch screenshot capture from a Google Sheet

What if you have a Google Sheet with 50 URLs and need screenshots of all of them? A single code step with a loop handles the entire batch.

import axios from "axios";

export default defineComponent({
  async run({ steps, $ }) {
    const urls = steps.trigger.event.rows.map(row => row.url);
    const results = [];

    for (const url of urls) {
      try {
        const response = await axios({
          method: "GET",
          url: "https://api.screenshotrun.com/v1/screenshots/capture",
          params: {
            url: url,
            format: "webp",
            width: 1280,
            full_page: true,
            block_ads: true,
            response_type: "json",
          },
          headers: {
            Authorization: `Bearer ${process.env.SCREENSHOTRUN_API_KEY}`,
          },
        });

        results.push({
          url: url,
          screenshot_url: response.data.links.image,
          status: "success",
        });
      } catch (error) {
        results.push({
          url: url,
          status: "failed",
          error: error.message,
        });
      }

      // Small delay to stay within rate limits
      await new Promise(resolve => setTimeout(resolve, 500));
    }

    $.export("results", results);
    return `Processed ${results.length} URLs: ${results.filter(r => r.status === "success").length} succeeded`;
  },
});

This version uses response_type=json so the API returns a hosted image URL instead of raw bytes. Easier to store in a spreadsheet or database. The try/catch around each URL means one broken page doesn't kill the whole batch. The 500ms delay keeps you within rate limits on larger lists.

Webhook-triggered screenshot API calls

Need screenshots triggered by an external event? Pipedream generates a unique webhook URL for any workflow. External services call that URL, your workflow runs in response, captures the page, returns the image.

Set your trigger to "HTTP / Webhook" instead of Manual or Schedule. Pipedream gives you a URL like https://eo1234abc.m.pipedream.net. POST a JSON body with the target URL:

curl -X POST "https://eo1234abc.m.pipedream.net" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "format": "webp"}'

Your workflow reads the incoming data from steps.trigger.event.body and passes it to the screenshot API call. The response goes wherever your workflow sends it: Slack, email, S3 bucket, webhook callback.

import axios from "axios";

export default defineComponent({
  async run({ steps, $ }) {
    const { url, format = "png" } = steps.trigger.event.body;

    const response = await axios({
      method: "GET",
      url: "https://api.screenshotrun.com/v1/screenshots/capture",
      params: {
        url: url,
        format: format,
        width: 1280,
        block_cookies: true,
      },
      headers: {
        Authorization: `Bearer ${process.env.SCREENSHOTRUN_API_KEY}`,
      },
      responseType: "arraybuffer",
    });

    // Respond to the webhook caller with the image
    await $.respond({
      status: 200,
      headers: { "Content-Type": `image/${format}` },
      body: response.data,
    });
  },
});

Call the webhook URL, get a screenshot back directly. Your CI pipeline, internal tool, or another automation platform can trigger screenshots through this endpoint without needing the ScreenshotRun API key. The key stays safely in Pipedream's environment variables.

Why Pipedream beats Zapier for screenshot automation

Both platforms can call the ScreenshotRun screenshot API. The difference shows up once your workflows get more complex.

Zapier charges per task, and every step in a Zap counts as a task. A five-step workflow capturing 100 screenshots burns 500 tasks. At scale, that gets expensive. Pipedream's pricing is based on compute time, not step count. A loop that processes 100 URLs in a single code step counts as one invocation, not 100.

Pipedream gives you Node.js code steps with full npm access. Need to resize the screenshot with Sharp before uploading? Import the package and add three lines. Zapier doesn't offer that. You'd need a separate image processing service or a code-by-Zapier step with limited capabilities.

Error handling is also different. In Zapier, if a step fails, the Zap stops (unless you pay for Paths). In Pipedream, a try/catch in your code step handles errors gracefully. The batch processing example above demonstrates this: one failed URL doesn't stop the other 49.

If your workflows are simple (trigger → screenshot → save), either platform works. For batch processing, branching logic, custom error handling, or anything involving code, Pipedream is the stronger choice. For the Zapier setup, see our Zapier integration guide.

Advanced screenshot API parameters in Pipedream

Every ScreenshotRun screenshot API parameter works in Pipedream. Add them to the params object in your axios call. The most useful ones for automation workflows:

params: {
  url: "https://example.com",
  format: "webp",         // smaller files for Slack/email
  width: 1280,
  full_page: true,         // capture entire scrollable page
  block_cookies: true,     // remove consent banners
  block_ads: true,         // remove ad overlays — see /features/ad-blocking
  block_chats: true,       // remove chat widgets
  dark_mode: true,         // capture in dark mode — see /features/dark-mode
  stealth: true,           // bypass bot detection — see /features/stealth-mode
  delay: 3000,             // wait 3 seconds for dynamic content
  css: "header { display: none; }",  // hide elements with CSS
  device: "mobile",        // mobile viewport
  response_type: "json",   // get hosted URL instead of binary
}

Use response_type=json when you need the hosted image URL for storing in databases or spreadsheets. Use responseType: "arraybuffer" in axios (without the API param) when you need the raw image bytes for file uploads or direct responses.

That covers the core Pipedream screenshot API patterns. For the full parameter list, check the feature pages. The n8n integration guide covers a similar workflow automation approach if you prefer self-hosted tools. Want to store captures in the cloud? The Amazon S3 integration pairs well with Pipedream. Sign up and start capturing — the free tier is generous enough to run a production Pipedream workflow without paying.

FAQ#