Migrating from Save to PDF Link to WebSave as PDF

This guide helps you migrate from the Save to PDF Link service to WebSave as PDF. The migration is straightforward and can be completed in a few simple steps.

Why migrate? Save to PDF Link is a legacy service that relies on the HTTP referrer header, which is increasingly unreliable due to browser privacy features and HTTPS policies. WebSave as PDF works more reliably and offers better customization options.

What's Different

Migration Steps

Step 1: Start Testing with the Demo Key

You can begin testing immediately using the demo key demo - no license needed. The demo key:

• Works on any domain
• Produces watermarked PDFs for testing
• Allows you to verify your migration works

After testing: Once you've confirmed everything works and are ready to deploy, you'll need to activate a PDFCrowd License:

1. Activate your PDFCrowd License
2. Get your WebSave key
3. Replace "demo" with your WebSave key in your code

Note on licenses: Your existing Domain License will continue to work during the transition period and will automatically expire at its expiry date. The PDFCrowd License and Domain License can coexist during migration.

Step 2: Replace Your HTML

Old Save to PDF Link:

<a href="//pdfcrowd.com/url_to_pdf/?"
   onclick="if(!this.p)href+='&url='+encodeURIComponent(location.href);this.p=1">
   Save to PDF
</a>

New WebSave as PDF:

<!-- Load WebSave script (recommended: 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) -->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as PDF
</button>

<!-- WebSave configuration (optional - only if you need custom settings) -->
<script>
window.webSaveConfig = {
  apiSettings: {
    content_viewport_width: 'balanced'
  }
};
</script>

Step 3: Map Your URL Parameters (if using any)

If you were using URL parameters with Save to PDF Link, here's how to configure them in WebSave:

Footer variable mapping:

Complete migration example:

If you were using this old configuration:

<a href="//pdfcrowd.com/url_to_pdf/?width=8.5in&height=11in&hmargin=0.5in&vmargin=0.75in&footer_text=Page%20$p&use_print_media=1&pdf_name=report.pdf"
   onclick="if(!this.p)href+='&url='+encodeURIComponent(location.href);this.p=1">
   Save to PDF
</a>

Replace with:

<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 PDF
</button>

<script>
window.webSaveConfig = {
  fileName: 'report.pdf',
  apiSettings: {
    page_width: '8.5in',
    page_height: '11in',
    margin_left: '0.5in',
    margin_right: '0.5in',
    margin_top: '0.75in',
    margin_bottom: '0.75in',
    use_print_media: true,
    footer_html: `
      <div style="text-align: center; font-size: 10px;">
        Page <span class="pdfcrowd-page-number"></span>
      </div>
    `
  }
};
</script>

Step 4: Test and Deploy

1. Test the functionality:
   • Implement the changes with data-key="demo"
   • Verify that PDFs are generated correctly (they will be watermarked)
   • Test all the settings you migrated from URL parameters
2. Switch to your WebSave key:
   • Once everything works as expected, activate your PDFCrowd License (see Step 1)
   • Get your WebSave key and replace "demo" in your code
   • Verify PDFs generate without watermarks

Troubleshooting

Issue: Button doesn't work

Solution: Ensure you've included both:

• The WebSave script: <script src="https://edge.pdfcrowd.com/websave/1.0.0/websave.min.js" async></script>
• The required class: class="pdfcrowd-websave"

Issue: "Invalid API key" error

Solution:

• Check you copied your WebSave key to the data-key attribute correctly
• Verify your WebSave key in your account
• Ensure the key is domain-locked to your website's domain

Issue: Styling looks different than expected

Solution:

• Use content_viewport_width: 'balanced' for best results
• Use custom_css to adjust styling specifically for PDF output
• Add use_print_media: true if you have print stylesheets

Need Help?

• WebSave as PDF documentation
• Contact support