WebSave as Image

Overview

WebSave as Image lets your users save any webpage as an image with one click. Simply add our JavaScript library and a button to your HTML - no server-side setup required.

Perfect for: Social media sharing, visual documentation, bug reports, and marketing materials. WebSave as Image captures full-length pages in one shot - no manual scrolling or stitching required.

Quick Start

The following examples demonstrate WebSave's capabilities, from basic setup to advanced integration. Each example builds on previous concepts, so you can start simple and add features as needed. Copy any example into your webpage to get started.

Note: WebSave requires a key. Examples below use a demo key for testing, sign up to get your WebSave keys. Learn how keys work.

<!-- Load WebSave script (place before closing </body> tag) -->
<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<!-- Add conversion button (place anywhere in your page)
  class="pdfcrowd-websave" - Required: Enables WebSave functionality
  class="pdfcrowd-websave-style" - Optional: Applies default button styling
  data-key - Your domain-locked WebSave key
  data-config - Links to configuration object below
-->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>


<!-- WebSave configuration for image conversion -->
<script>
window.webSaveConfig = {
  apiSettings: {
    output_format: 'png'  // Required for image conversion
  }
};
</script>

<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<!-- Button with content mode configuration -->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<script>
window.webSaveConfig = {
  // NEW: Enable content mode to capture current DOM state
  conversionMode: "content",
  apiSettings: {
    output_format: 'png',
  }
};
</script>

<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<!-- No pdfcrowd-websave-style class - use your own CSS -->
<button class="pdfcrowd-websave my-custom-button"
        data-key="demo"
        data-config="webSaveConfig">
  Save As Image
</button>

<!-- Customization configuration -->
<script>
window.webSaveConfig = {
  fileAction: 'download',  // or 'open', 'openNewTab'
  fileName: () => 'screenshot-' + new Date().toISOString().split('T')[0] + '.jpg',     
  
  // Image conversion settings
  apiSettings: {
    output_format: 'jpg',     // JPEG format
    screenshot_width: 1600,   // Width in pixels
    jpeg_quality: 85          // Quality (1-100)
  }
};
</script>

<!-- Custom CSS for the button -->
<style>
.my-custom-button {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.my-custom-button:hover {
  background: #0056b3;
}
.my-custom-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
</style>

<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<!-- Method Selection Guide:
   - URL parameters: Best when server has print-specific templates
   - Print stylesheets: Quick option if @media print CSS exists
   - Custom CSS: Flexible styling without modifying HTML
   - JavaScript: Dynamic content manipulation
   - pdfcrowd-remove class: Simple for removing static elements -->

<script>
window.webSaveConfig = {

  // Method 1: URL parameters, adds ?print=1 (URL mode only)
  onBeforeConversion: function(config) {
    if (config.conversionMode === 'url') {
      const url = new URL(config.url);
      url.searchParams.set('print', '1');
      config.url = url.toString();
    }
    return false; // Proceed with conversion
  },
  
  apiSettings: {
    // Method 2: Print stylesheets
    // use_print_media: true,
    
    // Method 3: Custom CSS injection
    custom_css: `
      /* Hide elements in screenshot */
      .advertisement, .sidebar, footer { 
        display: none !important; 
      }
      /* Adjust layout for cleaner capture */
      .content { 
        width: 100% !important; 
        max-width: none !important; 
      }
    `,
    
    // Method 4: JavaScript preprocessing
    custom_javascript: `
      // Remove dynamic content before conversion
      document.querySelectorAll('.video-player, .chat-widget').forEach(el => {
        el.remove();
      });
      // Expand collapsed sections
      document.querySelectorAll('.collapsed').forEach(el => {
        el.classList.remove('collapsed');
      });
    `,

    output_format: 'png'      
  }
};

</script>

<!-- Method 5: Use pdfcrowd-remove class directly in HTML
     Add this class to elements in your actual page content: -->
<nav class="pdfcrowd-remove">
  This navigation won't appear in the screenshot
</nav>

<!-- Advanced customization with callbacks -->
<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<script>
// This example assumes you have these functions defined:
// - showCustomErrorModal(message, code) - your error UI
// - trackEvent(name, data) - your analytics
// - userIsLoggedIn() - your auth check

window.webSaveConfig = {

  // Custom error handling
  onError: function(errorMessage, statusCode) {
    console.error('WebSave error:', errorMessage, 'Code:', statusCode);
    
    // Display your own error UI instead of default dialog
    showCustomErrorModal(errorMessage, statusCode);
    
    return true; // Return true to prevent default error dialog
  },
  
  // Track successful conversions
  onFileCreated: function(blob) {
    // Log success for analytics
    trackEvent('image_generated', {
      size: blob.size,
      page: window.location.pathname
    });
    
    return false; // Return false to let WebSave handle download
  },
  
  // Pre-conversion validation (optional)
  onBeforeConversion: function(config) {
    // Validate or modify before conversion starts
    // Example: Check if user is logged in
    if (!userIsLoggedIn()) {
       alert('Please log in to download image');
       return true; // Cancel conversion
    }

    return false; // Proceed with conversion
  },

  // Image generation settings
  apiSettings: {
    output_format: 'png'
  }
};
</script>

Authentication

How WebSave Keys Work

WebSave uses domain-locked keys for security. Each key is tied to a specific domain when created and will only work on that domain. This means your WebSave key can be safely included in client-side code - if someone copies it, they cannot use it on their own website. The key is provided via the data-key attribute on your conversion button.

Getting Your Keys

Key Management Options

• Create separate keys for each of your domains.
• You can generate multiple keys per domain for various sections or teams.
• Use separate keys for staging and production environments.
• Revoke and regenerate keys anytime if needed.

Error Handling

WebSave provides comprehensive error handling that works automatically without any configuration. The system includes built-in error recovery mechanisms and displays clear feedback when issues occur. You can customize how errors are presented to users while keeping the automatic recovery features.

Built-in Error Recovery

These features work automatically for all conversions, regardless of how you handle error display:

• Automatic retry for temporary server issues - retries up to 3 times for 502/503 errors with 1-second delays
• Button state management - disables during conversion, re-enables after completion or error
• Conversion queuing protection - prevents multiple simultaneous conversions from the same button

Error Display Options

When an error occurs after automatic recovery attempts, WebSave needs to inform the user. You have two options:

Option 1: Default Error Dialog

Without any configuration, WebSave shows a professional modal dialog that includes:

• Clear error message describing what went wrong
• Collapsible details section with technical information
• Links to status code documentation for specific errors
• Timestamp for support reference

The default dialog provides a good user experience out of the box. You only need custom error handling if you want to integrate with your own UI or error tracking systems.

Option 2: Custom Error Display

Use the onError callback to control how errors are shown to users. The automatic retry and button state management still happen - you're only customizing the final error presentation.

Implementing Custom Error Handling

Use the onError callback to customize error handling. This example shows a complete production-ready implementation with user-friendly messages, console logging, and error tracking:

<script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>

<button class="pdfcrowd-websave"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<script>
// This example assumes you have these functions defined:
// - showNotification(message) - displays message to user
// - trackError(eventName, data) - sends error to tracking service

window.webSaveConfig = {
  onError: function(errorMessage, statusCode) {
    // Log to console for debugging
    console.error('WebSave Error:', {
      message: errorMessage,
      code: statusCode,
      url: window.location.href
    });
    
    // Show user-friendly message
    let userMessage = 'Unable to generate image. Please try again.';
    if (statusCode === 429) {
      userMessage = 'Too many requests. Please wait a moment and try again.';
    } else if (statusCode >= 500) {
      userMessage = 'Service temporarily unavailable. Please try again later.';
    }
    
    // Display to user
    showNotification(userMessage);
    
    // Track error for monitoring
    trackError('image_generation_failed', {
      message: errorMessage,
      code: statusCode,
      url: window.location.href
    });
    
    // Return true to suppress default dialog
    // Return false to show default dialog (with your logging still running)
    return true;
  },
  apiSettings: {
    output_format: 'png'
  }
};
</script>

Best Practices

Production Sites

• Show generic messages to end users rather than technical API errors
• Log detailed errors to tracking services for debugging
• Provide actionable recovery options like retry or contact support
• Consider your users' technical level when crafting error messages

Development and Testing

• Use default error handling during development to see full error details
• Test error scenarios with invalid keys and network issues
• Set verbosity: 1 in configuration to enable console logging
• Check browser console for additional debugging information

Status Codes

For detailed information about specific error codes and their solutions, see the Status Codes Reference. Common status codes in WebSave:

• 400 - Invalid request parameters or settings
• 403 - Authentication failed (invalid key or wrong domain)
• 429 - Rate limit exceeded
• 502/503 - Temporary server issues (automatically retried)

Troubleshooting

This guide helps you diagnose and resolve common WebSave integration issues. For automatic error recovery and customization options, see the Error Handling section above.

Button Not Working

Button doesn't respond to clicks

• Verify the button has the correct class: pdfcrowd-websave
• Check that data-key attribute contains your WebSave key
• Ensure the WebSave script loads
• Confirm your page is served over HTTPS - WebSave requires secure connections
• Open browser console and check for JavaScript errors or security warnings

Invalid WebSave key error

• Verify the key matches the domain where your page is hosted
• Check that you're using a WebSave key (not a regular API key)
• Ensure the key is active in your WebSave dashboard

Not working on localhost

WebSave cannot access localhost URLs as conversions happen on PDFCrowd servers. Use ngrok or localtunnel to create a temporary public HTTPS URL for your local development server.

Content Not Captured Correctly

Pages behind login or with user input

URL mode fetches a fresh page from your server. Use conversionMode: "content" in your JavaScript configuration for:

• Pages behind login/authentication
• Form values and user input
• User-modified content after page load
• Single-page application state

See Example 2 for implementation.

JavaScript-generated or AJAX content missing

For dynamic content, either use content mode or add javascript_delay to wait for content to load:

window.webSaveConfig = {
  apiSettings: {
    javascript_delay: 2000,  // Wait 2 seconds for JS/AJAX
  }
}

Wrong responsive layout or content cut off

Images may show mobile layout instead of desktop (or vice versa) based on viewport width. Set screenshot_width to control which responsive breakpoint is used:

window.webSaveConfig = {
  apiSettings: {
    screenshot_width: "1280px",  // Force desktop layout
  }
}

Common widths: Mobile (375-414px), Tablet (768-834px), Desktop (1280-1920px).

Debugging Tools and Techniques

WebSave provides two debugging options to help diagnose different types of issues:

• verbosity logs WebSave events (button clicks, API calls, key validation) to your browser console - useful for integration and configuration issues.
• debug_log captures what happens on PDFCrowd servers (resource loading, timeouts) - helpful for content and layout problems. Find these logs in your conversion log.

window.webSaveConfig = {
  verbosity: 1,  // Client-side: logs events to browser console
  apiSettings: {
    debug_log: true,  // Server-side: saves details to conversion log
  }
};

Getting Help

If you're still experiencing issues after trying these solutions:

• Review the API Status Codes for specific error code explanations
• Check the FAQ for answers to common questions
• Visit the WebSave Reference for detailed configuration options
• Contact support with your configuration and any error messages

When contacting support, include:

• Your WebSave configuration code
• The URL where the issue occurs (or a test page demonstrating the problem)
• Browser console output with verbosity: 1 enabled
• Screenshots of any error messages

WebSave Reference

See the WebSave Reference for all configuration options including page layout, PDF settings, headers/footers, watermarks, and advanced conversion controls.