AI-Powered Element Removal: Clean Screenshots Without Popups and Banners

The Problem with Modern Website Screenshots

Every developer who's automated website screenshots knows the frustration: you capture a beautiful landing page, only to find it obscured by a massive cookie consent banner, an aggressive chat widget, or a "Subscribe to our newsletter" popup blocking half the content.

These elements are everywhere. GDPR compliance means cookie banners on virtually every European-targeting site. Customer support tools mean chat bubbles in the corner. Growth hacking means exit-intent popups and newsletter modals.

For documentation screenshots, these distractions are unacceptable. For social media previews, they look unprofessional. For visual testing, they create false positives.

This guide explores how Screenshotly's AI-powered element removal solves this problem automatically, and how you can leverage it for pristine, professional screenshots every time.

Understanding AI Element Detection

How Our AI Identifies Unwanted Elements

Screenshotly's element removal system uses a multi-layered approach combining:

1. Pattern Recognition: Machine learning models trained on millions of web pages to recognize common UI patterns
2. Position Analysis: Detection of fixed-position elements that overlay content
3. Behavioral Signals: Identification of elements that appear after page load (typical of popups)
4. Semantic Understanding: Recognition of text patterns like "Accept cookies", "Subscribe", "Chat with us"

Our models achieve 97.3% accuracy on cookie banner detection and 94.1% accuracy on chat widget detection across a test set of 50,000 diverse websites.

Types of Elements We Detect

Element Type	Detection Accuracy	Common Examples
Cookie Banners	97.3%	GDPR consent, cookie notices, privacy popups
Chat Widgets	94.1%	Intercom, Drift, Zendesk, Crisp, LiveChat
Newsletter Popups	91.8%	Email capture, exit-intent modals
Promotional Overlays	89.2%	Sale banners, discount popups, app install prompts
Social Proof	87.5%	Recent purchase notifications, visitor counters

Implementing AI Element Removal

Basic Implementation

The simplest way to use AI removal is to enable it in your API request:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    format: 'png',
    aiRemoval: {
      enabled: true,
    },
  }),
});

With enabled: true and no specific types, all detected elements will be removed.

Selective Element Removal

For more control, specify which element types to remove:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    format: 'png',
    aiRemoval: {
      enabled: true,
      types: ['cookie-banner', 'chat-widget'],
    },
  }),
});

Available removal types:

• cookie-banner - GDPR consent banners and cookie notices
• chat-widget - Live chat and support widgets
• newsletter - Email subscription popups
• promotional - Sale banners, discount overlays
• social-proof - "Someone just purchased" notifications
• app-install - Mobile app install prompts

Combining AI with CSS Selectors

For maximum control, combine AI removal with specific CSS selectors:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    format: 'png',
    aiRemoval: {
      enabled: true,
      types: ['cookie-banner'],
    },
    hideSelectors: [
      '#custom-popup',
      '.promo-overlay',
      '[data-testid="announcement-bar"]',
    ],
  }),
});

This approach gives you AI intelligence for common patterns plus explicit control over site-specific elements.

Real-World Use Cases

Documentation Screenshots

When building product documentation, you want screenshots that show your UI without distractions. Here's a Documentation workflow that was refined through hundreds of captures:

async function captureDocScreenshot(url, options = {}) {
  const response = await fetch('https://api.screenshotly.app/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SCREENSHOTLY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      url,
      device: options.device || 'desktop',
      format: 'png',
      aiRemoval: {
        enabled: true,
        types: ['cookie-banner', 'chat-widget', 'newsletter', 'promotional'],
      },
      hideSelectors: [
        // Common development/staging indicators
        '.dev-banner',
        '[data-env="staging"]',
        // User-specific elements
        '.user-avatar',
        '.notification-badge',
      ],
      delay: 1000, // Wait for animations to complete
    }),
  });

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

  return response.arrayBuffer();
}

This configuration ensures your documentation shows exactly what users will see—the clean, focused UI without development artifacts or obtrusive overlays.

E-commerce Product Monitoring

When monitoring competitor product pages, popup removal is essential for consistent captures:

async function captureProductPage(productUrl) {
  const response = await fetch('https://api.screenshotly.app/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SCREENSHOTLY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      url: productUrl,
      device: 'desktop',
      format: 'png',
      fullPage: true,
      aiRemoval: {
        enabled: true,
        types: ['cookie-banner', 'chat-widget', 'newsletter', 'promotional', 'social-proof'],
      },
      delay: 2000, // Wait for product images to load
    }),
  });

  return response;
}

The social-proof removal is particularly useful for e-commerce sites that display "X people are viewing this" or "Recently purchased" notifications that can obscure product information.

Social Media Preview Generation

For generating OG images, you want the cleanest possible capture:

async function generateSocialPreview(pageUrl) {
  const response = await fetch('https://api.screenshotly.app/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SCREENSHOTLY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      url: pageUrl,
      viewport: {
        width: 1200,
        height: 630, // OG image dimensions
      },
      format: 'png',
      aiRemoval: {
        enabled: true,
        types: ['cookie-banner', 'chat-widget', 'newsletter', 'promotional'],
      },
      mockup: 'browser-light', // Add browser frame for premium look
    }),
  });

  return response;
}

Advanced Techniques

Handling Edge Cases

Some websites have unconventional popup implementations. Here are strategies for handling them:

Time-delayed popups:

{
  delay: 3000, // Wait for popup to appear
  aiRemoval: {
    enabled: true,
  },
}

Scroll-triggered popups:

{
  scrollTo: 500, // Trigger scroll-based elements
  delay: 1500,
  aiRemoval: {
    enabled: true,
  },
}

Multi-step modals:

{
  beforeCapture: {
    click: '.modal-close', // Dismiss any open modals
  },
  delay: 500,
  aiRemoval: {
    enabled: true,
  },
}

Performance Optimization

AI processing adds latency. Here's how to optimize:

// For high-volume capture, disable AI when not needed
const needsAiRemoval = (url) => {
  const knownCleanDomains = ['api.example.com', 'docs.example.com'];
  return !knownCleanDomains.some(domain => url.includes(domain));
};

async function captureWithOptimizedAI(url) {
  const config = {
    url,
    device: 'desktop',
    format: 'png',
  };

  if (needsAiRemoval(url)) {
    config.aiRemoval = {
      enabled: true,
      types: ['cookie-banner', 'chat-widget'],
    };
  }

  return fetch('https://api.screenshotly.app/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SCREENSHOTLY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(config),
  });
}

Debugging AI Removal

When AI removal isn't working as expected, use these debugging strategies:

1. Capture without removal first to see what elements exist
2. Check element positions - AI targets fixed-position overlays
3. Verify timing - add delay if popups appear after page load
4. Use explicit selectors as fallback for site-specific elements

// Debug mode: capture with metadata
const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.SCREENSHOTLY_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    aiRemoval: {
      enabled: true,
      debug: true, // Returns removal metadata
    },
  }),
});

// Check X-AI-Removed header for details
console.log(response.headers.get('X-AI-Removed'));
// Output: "cookie-banner:1,chat-widget:1,newsletter:0"

Integration Patterns

CI/CD Documentation Pipeline

Integrate AI removal into your documentation build process:

# .github/workflows/docs-screenshots.yml
name: Update Documentation Screenshots

on:
  push:
    branches: [main]
    paths:
      - 'src/**'

jobs:
  capture-screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Capture Screenshots
        run: |
          node scripts/capture-docs-screenshots.js
        env:
          SCREENSHOTLY_API_KEY: ${{ secrets.SCREENSHOTLY_API_KEY }}
      
      - name: Commit Updated Screenshots
        run: |
          git config user.name "GitHub Actions"
          git config user.email "actions@github.com"
          git add docs/images/
          git commit -m "Update documentation screenshots" || exit 0
          git push

Visual Regression Testing

Use AI removal to eliminate false positives from dynamic elements:

// visual-test.js
const { captureScreenshot } = require('./screenshot-utils');

describe('Visual Regression Tests', () => {
  it('should match homepage baseline', async () => {
    const screenshot = await captureScreenshot('https://example.com', {
      aiRemoval: {
        enabled: true,
        types: ['cookie-banner', 'chat-widget', 'social-proof'],
      },
    });

    // Compare against baseline
    expect(screenshot).toMatchImageSnapshot({
      customDiffConfig: { threshold: 0.1 },
    });
  });
});

This approach prevents cookie banners and chat widget position changes from failing your visual tests.

Comparing Approaches

AI Removal vs. Manual CSS Hiding

Approach	Pros	Cons	Best For
AI Removal	Zero maintenance, adapts to changes	Slight latency, 90%+ accuracy	Unknown sites, scale
CSS Selectors	100% precise, no latency	Requires maintenance, site-specific	Known sites, critical captures
Combined	Best of both worlds	More configuration	Production workflows

When to Use Each

Use AI Removal alone:

• Capturing unknown or varied websites
• Building tools that work across any URL
• When maintenance time is limited

Use CSS Selectors alone:

• Your own sites with known structure
• Ultra-performance-sensitive applications
• When 100% precision is required

Use Combined approach:

• Production documentation pipelines
• E-commerce monitoring systems
• Any high-stakes, high-volume application

Best Practices Summary

1. Start with AI-only and add selectors only when needed
2. Use type-specific removal rather than removing everything
3. Add appropriate delays for sites with late-loading popups
4. Cache results to avoid re-processing unchanged pages
5. Monitor accuracy and provide feedback for edge cases
6. Combine with performance optimization techniques from our performance guide

Next Steps

Now that you understand AI element removal, explore related features:

• Device Mockups: Add beautiful frames to your clean screenshots
• Performance Optimization: Make captures faster and more efficient
• Mobile Screenshots: Capture responsive designs perfectly
• Visual Testing: Integrate clean screenshots into your test pipeline

Ready to capture clean, professional screenshots? Start with our interactive playground or check the API documentation for complete reference.

For JavaScript integration or Python integration, see our language-specific guides.