Screenshot API: Automated Website Screenshots for Thumbnails & Previews

What is a Screenshot API?

A screenshot API is a programmatic interface that captures screenshots of web pages automatically. Unlike manual screenshot tools, a website screenshot API can process hundreds or thousands of URLs via HTTP requests, making it essential for applications that need to generate visual previews at scale.

Modern screenshot APIs go beyond simple page captures. They offer interactive browser automation - click buttons, fill forms, handle cookie banners, and navigate websites before taking the screenshot. This enables you to capture authenticated pages, dismiss pop-ups, and get clean screenshots of any website state.

Common use cases include generating Open Graph images for social sharing, building link preview systems for chat applications, automating portfolio screenshots for web agencies, website monitoring and change detection, and creating visual sitemaps for documentation.

Why Use a Screenshot API?

Manual screenshot creation is time-consuming, inconsistent, and doesn't scale. Here's why automation is essential:

• Scale: Generate thousands of thumbnails automatically instead of capturing each one manually.
• Consistency: Ensure uniform dimensions, quality, and styling across all thumbnails.
• Real-time updates: Automatically refresh thumbnails when websites change or update content.
• Cross-device testing: Capture screenshots from multiple device viewports simultaneously.
• Integration: Connect thumbnail generation directly into your CMS, marketing tools, or automation workflows.
• Cost efficiency: Eliminate manual labor costs and reduce time-to-market for visual content.

The CustomJS Screenshot API handles the complexity of browser automation, rendering, and image optimization, allowing you to focus on building features rather than managing Puppeteer infrastructure.

How the CustomJS Screenshot API Works

The CustomJS Screenshot API is powered by Puppeteer (headless Chrome) and captures high-quality website screenshots via simple HTTP requests. Create a CustomJS function with the SCREENSHOT utility, deploy it, and call it from any programming language.

The API supports interactive browser automation - click elements, type into forms, wait for content to load, and crop specific areas. It automatically handles complex scenarios like lazy-loaded images, dynamic content, single-page applications, and cookie banners.

The interactive widget above demonstrates the full power of the Screenshot API. You can visually configure all actions and then get the exact API code you need.

Screenshot API: Basic Example

Here's how to use the CustomJS Screenshot API to capture website screenshots. This works with any HTTP client in any programming language.

cURL Example

curl -X POST 'https://e.customjs.io/screenshot' \
  -H 'x-api-key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "input": {
      "url": "https://example.com",
      "commands": []
    }
  }' \
  > screenshot.png

JavaScript/Node.js Example

const axios = require('axios');
const fs = require('fs');

async function captureScreenshot(url) {
  const response = await axios.post(
    'https://e.customjs.io/screenshot',
    {
      input: {
        url: url,
        commands: []
      }
    },
    {
      headers: {
        'x-api-key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      responseType: 'arraybuffer'
    }
  );
  
  fs.writeFileSync('screenshot.png', response.data);
  console.log('Screenshot captured successfully!');
}

captureScreenshot('https://example.com');

Using the JavaScript SDK

Install the official SDK: npm install @custom-js/sdk-js

const { CustomJS } = require('@custom-js/sdk-js');

const client = new CustomJS('YOUR_API_KEY');

async function captureScreenshot(url) {
  const screenshot = await client.screenshot({
    url: url,
    commands: []
  });
  
  // screenshot is a Buffer containing PNG data
  require('fs').writeFileSync('screenshot.png', screenshot);
  console.log('Screenshot captured!');
}

captureScreenshot('https://example.com');

Python Example

import requests

def capture_screenshot(url):
    api_url = 'https://e.customjs.io/screenshot'
    headers = {
        'x-api-key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
    }
    payload = {
        'input': {
            'url': url,
            'commands': []
        }
    }
    
    response = requests.post(api_url, json=payload, headers=headers)
    
    with open('screenshot.png', 'wb') as f:
        f.write(response.content)
    
    print('Screenshot captured successfully!')

capture_screenshot('https://example.com')

Use Case 1: Social Media Card Generator

Automatically generate Open Graph images for social media sharing. When users share your content on Twitter, LinkedIn, or Facebook, these platforms display rich previews using Open Graph meta tags.

Optimal Dimensions for Social Platforms

• Twitter/X: 1200x630px (1.91:1 ratio) - Maximum file size 5MB
• Facebook: 1200x630px (1.91:1 ratio) - Minimum 600x315px
• LinkedIn: 1200x627px (1.91:1 ratio) - Recommended for best display
• Instagram: 1080x1080px (1:1 ratio) - Square format
• Pinterest: 1000x1500px (2:3 ratio) - Vertical format preferred

Custom Social Cards with Screenshot API

For fully custom social cards, create a temporary HTML page and screenshot it:

const axios = require('axios');

// Create temporary HTML page URL or use data URI
const htmlContent = `
  <!DOCTYPE html>
  <html>
  <head>
    <style>
      body {
        margin: 0;
        width: 1200px;
        height: 630px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, sans-serif;
      }
      .card {
        background: white;
        padding: 60px;
        border-radius: 20px;
        max-width: 1000px;
      }
      h1 { font-size: 56px; margin: 0 0 20px 0; color: #1a202c; }
      p { font-size: 28px; color: #4a5568; margin: 0; }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>My Article Title</h1>
      <p>Article description here</p>
    </div>
  </body>
  </html>
`;

// Option 1: Upload HTML to temporary URL and screenshot it
// Option 2: Use data URI (for smaller HTML)
const dataUri = 'data:text/html;base64,' + Buffer.from(htmlContent).toString('base64');

const screenshot = await axios.post(
  'https://e.customjs.io/screenshot',
  {
    input: {
      url: dataUri,
      commands: []
    }
  },
  {
    headers: {
      'x-api-key': 'YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    responseType: 'arraybuffer'
  }
);

This approach gives you complete control over the design while generating actual PNG screenshots.

Use Case 2: Link Preview System

Build a link preview system similar to Slack, Discord, or WhatsApp. When users paste a URL, automatically fetch and display a visual preview with thumbnail, title, and description.

Complete Link Preview Implementation

async function generateLinkPreview(url) {
  // 1. Fetch page metadata
  const metadataResponse = await axios.get(url);
  const html = metadataResponse.data;
  
  // Parse Open Graph tags (simplified)
  const titleMatch = html.match(/<meta property="og:title" content="([^"]+)"/);
  const descMatch = html.match(/<meta property="og:description" content="([^"]+)"/);
  
  const title = titleMatch ? titleMatch[1] : 'Untitled';
  const description = descMatch ? descMatch[1] : '';
  
  // 2. Generate thumbnail screenshot
  const screenshotResponse = await axios.post(
    'https://e.customjs.io/screenshot',
    {
      input: {
        url: url,
        commands: []
      }
    },
    {
      headers: {
        'x-api-key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      responseType: 'arraybuffer'
    }
  );
  
  // 3. Save thumbnail and return preview data
  const thumbnailPath = `thumbnails/${Date.now()}.png`;
  fs.writeFileSync(thumbnailPath, screenshotResponse.data);
  
  return {
    url: url,
    title: title,
    description: description,
    thumbnail: thumbnailPath,
    timestamp: new Date()
  };
}

// Usage in chat application
app.post('/api/preview', async (req, res) => {
  const { url } = req.body;
  const preview = await generateLinkPreview(url);
  res.json(preview);
});

Use Case 3: Portfolio Screenshot Automation

Web agencies and freelancers can automate portfolio screenshot generation. Instead of manually capturing and updating project screenshots, automatically generate fresh thumbnails on demand or on a schedule.

Automated Portfolio Gallery

const projects = [
  { name: 'E-commerce Store', url: 'https://client1.com' },
  { name: 'Corporate Website', url: 'https://client2.com' },
  { name: 'SaaS Dashboard', url: 'https://client3.com' }
];

async function updatePortfolioScreenshots() {
  for (const project of projects) {
    console.log(`Generating screenshot for ${project.name}...`);
    
    // Generate desktop screenshot
    const desktopScreenshot = await axios.post(
      'https://e.customjs.io/screenshot',
      {
        input: {
          url: project.url,
          commands: []
        }
      },
      {
        headers: {
          'x-api-key': 'YOUR_API_KEY',
          'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
      }
    );
    
    // Generate mobile screenshot
    const mobileScreenshot = await axios.post(
      'https://e.customjs.io/screenshot',
      {
        input: {
          url: project.url,
          commands: []
        }
      },
      {
        headers: {
          'x-api-key': 'YOUR_API_KEY',
          'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
      }
    );
    
    // Save screenshots
    fs.writeFileSync(`portfolio/${project.name}-desktop.png`, desktopScreenshot.data);
    fs.writeFileSync(`portfolio/${project.name}-mobile.png`, mobileScreenshot.data);
    
    console.log(`✓ Screenshots saved for ${project.name}`);
  }
}

// Run weekly via cron job
updatePortfolioScreenshots();

Use Case 4: CMS Integration for Blog Thumbnails

Automatically generate featured images for blog posts. When authors publish content without uploading a featured image, the CMS can automatically generate one from the article's URL or custom HTML template.

WordPress/CMS Integration Example

// Webhook handler for new blog posts
app.post('/webhook/new-post', async (req, res) => {
  const { postId, title, excerpt, author } = req.body;
  
  // Generate custom featured image HTML
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        body {
          margin: 0;
          width: 1200px;
          height: 630px;
          background: linear-gradient(to right, #4f46e5, #7c3aed);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px;
          box-sizing: border-box;
        }
        .content {
          background: white;
          padding: 60px;
          border-radius: 24px;
          max-width: 1000px;
        }
        h1 {
          font-size: 64px;
          margin: 0 0 24px 0;
          color: #1f2937;
          line-height: 1.2;
        }
        .meta {
          font-size: 24px;
          color: #6b7280;
        }
      </style>
    </head>
    <body>
      <div class="content">
        <h1>${title}</h1>
        <p class="meta">By ${author}</p>
      </div>
    </body>
    </html>
  `;
  
  // Generate featured image screenshot
  const screenshot = await axios.post(
    'https://e.customjs.io/screenshot',
    {
      input: {
        url: `https://yourdomain.com/preview/${postId}`, // Your preview page
        commands: []
      }
    },
    {
      headers: {
        'x-api-key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      responseType: 'arraybuffer'
    }
  );
  
  // Upload to CMS
  const imagePath = `featured-images/${postId}.png`;
  fs.writeFileSync(imagePath, screenshot.data);
  
  // Update post with featured image
  await updatePostFeaturedImage(postId, imagePath);
  
  res.json({ success: true, imagePath });
});

Advanced Features: Browser Interactions

Handling Cookie Banners and Pop-ups

One of the most powerful features of the Screenshot API is browser automation. You can click buttons, fill forms, and handle cookie banners before capturing the screenshot.

curl -X POST 'https://e.customjs.io/screenshot' \
  -H 'x-api-key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "input": {
      "url": "https://example.com",
      "commands": [
        {"action": "click", "selector": "#accept-cookies"},
        {"action": "wait", "value": 1000}
      ]
    }
  }' \
  > screenshot.png

Filling Forms and Login

Chain multiple automation commands to fill forms, log in to websites, and capture authenticated pages.

const axios = require('axios');

const response = await axios.post(
  'https://e.customjs.io/screenshot',
  {
    input: {
      url: 'https://example.com/login',
      commands: [
        {action: 'type', selector: '#username', value: 'user@example.com'},
        {action: 'type', selector: '#password', value: 'password123'},
        {action: 'click', selector: '#login-button'},
        {action: 'wait', value: 2000}
      ]
    }
  },
  {
    headers: {
      'x-api-key': 'YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    responseType: 'arraybuffer'
  }
);

Cropping Specific Areas

Use the bounding box feature to capture only specific parts of a webpage, perfect for extracting charts, images, or content blocks.

curl -X POST 'https://e.customjs.io/screenshot' \
  -H 'x-api-key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "input": {
      "url": "https://example.com",
      "commands": [],
      "box": {
        "x": 100,
        "y": 200,
        "width": 800,
        "height": 600
      }
    }
  }' \
  > cropped-screenshot.png

💡 Tip: Use the interactive widget at the top of this article to visually configure these actions. It generates the exact code you need!

Integration with Make.com and n8n

CustomJS offers native modules for Make.com and n8n, making it easy to integrate screenshot generation into no-code workflows.

Make.com Integration

Use the CustomJS module in Make.com to generate thumbnails without writing code:

1. Add the CustomJS module to your scenario
2. Select "Generate Screenshot" action
3. Configure URL and viewport settings
4. Receive screenshot as base64 or URL
5. Send to Google Drive, Dropbox, email, or any other service

Example workflow: When a new blog post is published in WordPress → Generate social media card → Upload to Cloudinary → Update post meta tags

n8n Integration

Similarly, n8n users can leverage CustomJS nodes for screenshot automation:

1. Install the CustomJS n8n node
2. Configure your API key
3. Use the Screenshot function
4. Connect to other nodes for complete automation

Example workflow: Schedule weekly → Fetch portfolio URLs from Airtable → Generate screenshots → Upload to S3 → Send notification

Best Practices for Website Thumbnails

2. Use Browser Interactions

Take advantage of CustomJS's interactive features. Click cookie banners, fill forms, and navigate to specific states before capturing screenshots. This ensures clean, professional results.

3. Crop Precisely

Use the bounding box feature to capture only the content you need. This is perfect for extracting specific elements like charts, product images, or content blocks without unnecessary surrounding content.

4. Cache Thumbnails

Store generated thumbnails and only regenerate when content changes. Use URL-based caching keys and implement cache invalidation strategies.

5. Test Your Configuration

Use the interactive widget on the Screenshot API page to test your configuration visually before implementing it in code. This saves time and ensures your screenshots look exactly as expected.

Available Automation Commands

The Screenshot API supports various automation commands that you can chain together to interact with websites before capturing:

Complex Command Example

{
  "input": {
    "url": "https://example.com",
    "commands": [
      {"action": "waitForSelector", "selector": "#content"},
      {"action": "click", "selector": "#accept-cookies"},
      {"action": "wait", "value": 1000},
      {"action": "type", "selector": "input#search", "value": "CustomJS"},
      {"action": "click", "selector": "button[type='submit']"},
      {"action": "wait", "value": 2000},
      {"action": "scroll", "value": 500}
    ]
  }
}

Pricing and Limits

CustomJS offers transparent, developer-friendly pricing for screenshot generation:

• Free Tier: 600 screenshots per month (no credit card required)
• Starter Plan: $9/month for 3,000 screenshots
• Growth Plan: $29/month for 15,000 screenshots
• Enterprise: Custom pricing for high-volume needs

Each screenshot generation counts as one API call. There are no hidden fees or per-pixel charges. Compare this to alternatives like ScreenshotAPI ($29/month for 5,000 screenshots) or ApiFlash ($12/month for 1,000 screenshots).

Start free with 600 screenshots per month

Frequently Asked Questions

1. What's the difference between a screenshot API and a thumbnail generator?

A screenshot API captures the visual appearance of any web page, while a thumbnail generator typically refers to creating optimized preview images. CustomJS's Screenshot API does both - it captures screenshots and can optimize them for specific use cases like social media cards or link previews.

2. Can I generate screenshots from HTML instead of URLs?

Yes! You can use data URIs to screenshot HTML content directly, or create a temporary preview page and screenshot it. For example, encode your HTML as base64 and use it as a data URI: data:text/html;base64,.... This is perfect for generating custom social media cards with full control over the design.

3. How long does it take to generate a screenshot?

Most screenshots are generated in 2-5 seconds. Complex pages with heavy JavaScript or many images may take up to 10 seconds. Pages requiring multiple interactions (clicks, form fills) may take slightly longer.

4. What image format is returned?

The Screenshot API returns PNG images by default. You can configure the response type in your CustomJS function settings.

5. Can I capture screenshots of password-protected pages?

Yes! Use the browser interaction commands to fill login forms and click submit buttons. You can chain multiple actions: type username, type password, click login, then capture the screenshot. This works for most authentication systems.

6. How do I handle cookie banners and pop-ups?

Use the 'click' command to automatically dismiss cookie banners and pop-ups. You can target elements by their text content (e.g., "Accept All") or CSS selectors. The interactive widget makes this easy - just click the element visually and it generates the code for you.

7. Can I use this in Make.com or n8n?

Yes! CustomJS offers native modules for both Make.com and n8n, making it easy to integrate screenshot generation into no-code workflows without writing any code.

8. Can I capture only a specific part of a page?

Absolutely! Use the bounding box feature to define the exact area you want to capture. Specify x, y coordinates and width, height dimensions. This is perfect for capturing specific elements like charts, images, or content sections without the entire page.

Conclusion

Automated website thumbnail generation is essential for modern web applications, from social media card generation to link preview systems and portfolio automation. CustomJS provides a powerful, easy-to-use Screenshot API that handles the complexity of browser automation, rendering, and image optimization.

With 600 free screenshots per month, native Make.com and n8n integration, and support for advanced features like device emulation and custom CSS injection, CustomJS is the ideal solution for developers and businesses automating visual content generation.

Whether you're building a link preview system, automating social media cards, or maintaining a portfolio gallery, the Screenshot API offers the flexibility and reliability you need to deliver professional results at scale.

Get started free today