Save a Web Page as PDF with WebSave

PDFCrowd WebSave is a JavaScript integration website owners add to provide a button that converts a web page to PDF. Add the pdfcrowd-websave class to a button, provide its required data-key, optionally point it to a configuration object, and load the WebSave script. Visitors can then use the configured button to download or open a PDF.

This guide covers PDFCrowd’s WebSave as PDF integration. It is not a general browser command and is unrelated to other apps or extensions that happen to use the name WebSave. See the PDFCrowd WebSave documentation for the current implementation reference.

Choose URL mode or content mode

The mode determines what WebSave converts. Decide this before adding the button, especially if the page requires a login or contains user-specific data.

Question	URL mode	Content mode
What is converted?	PDFCrowd fetches a fresh copy of the URL.	The browser sends the current page HTML for conversion.
Does it use the visitor’s login session?	No. The server-side fetch does not inherit the visitor’s session.	It can include content represented in the current HTML, including user-specific material.
Does it include current form values or client-side changes?	No; the fetch is separate from the visitor’s current page.	It can include values and changes represented in the submitted HTML.
Can you pass URL parameters?	Yes.	No.
Good fit	Public pages that the converter can reach.	Logged-in pages, forms, modified content, or single-page application state already rendered in the browser.

Content mode sends page HTML to PDFCrowd. Review whether that HTML contains confidential values or personal information before enabling it. It is a conversion of submitted HTML, not a screenshot of the visitor’s display: content or interaction state absent from that HTML is not automatically included. Protected assets may also need special handling.

Install the WebSave button

The basic integration uses a button, a key, and the WebSave JavaScript file. The demo key is useful for trying the flow, but its PDFs are watermarked. For production, use a personal key configured for your site’s domain.

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

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

The style class supplies default button styling, an icon, and a spinner. Remove pdfcrowd-websave-style if you want to style the button yourself. The data-key attribute is required. The script URL above is the version shown in the guide; check the current WebSave documentation before publishing in case the version has changed.

Use a personal key

1. Obtain a WebSave key from PDFCrowd.
2. Configure the key for the domain that will host the button.
3. Replace demo with the key value.
4. Check whether the configured host scope covers the exact hostname and any subdomains you use.

A key configured for one host may fail on another. Treat the key as a client-side integration credential scoped to the configured domain, and follow PDFCrowd’s guidance for your account and deployment.

Configure output and button behavior

WebSave supports a configuration object referenced by name from the button’s data-config attribute. The technical reference documents the output behavior and PDF settings below; use the current reference for accepted property names and values.

Setting	What it controls
Output destination	Download is the default. The PDF can also open in the current tab or a new tab.
Filename	The name suggested when the PDF is downloaded.
Page size	The PDF paper dimensions.
Margins	Space around the rendered page content.
JavaScript delay	Wait time that can help when page content is inserted asynchronously.

For example, put the configuration object on the page and reference it by its name. Fill in option names and values from the current official reference rather than copying guessed property names:

<script>
  const pdfOptions = {
    // Set supported PDF settings using the current WebSave reference.
  };
</script>

<button
  class="pdfcrowd-websave pdfcrowd-websave-style"
  data-key="YOUR_WEBSAVE_KEY"
  data-config="pdfOptions"
>
  Download this page
</button>

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

This is a configuration pattern, not a complete option-value example: consult the WebSave technical reference for the exact keys and accepted values supported by the version you deploy. Avoid relying on undocumented options.

Handle responsive layouts and dynamic pages

WebSave produces a new rendering from available HTML; it does not promise a pixel-identical copy of what the visitor saw. The rendered viewport width can select a different responsive breakpoint, so inspect the PDF at the widths relevant to your audience.

Target layout	Common viewport width range
Mobile	375–414 px
Tablet	768–834 px
Desktop	1280–1920 px

Dynamic content requires particular care:

• URL mode fetches the page independently, so it cannot see the visitor’s login, unsaved form values, or client-only changes.
• Content mode can use the HTML currently present in the browser, but unloaded records and interactive state not represented there remain absent.
• For delayed JavaScript or AJAX content, use content mode when the current rendered page matters or configure an appropriate javascript_delay using the documented option.
• Test pages with long lists, lazy content, and authenticated assets; do not assume scrolling or interaction will be replayed automatically.

Initialize buttons inserted by a JavaScript framework

If React, Vue, Angular, Svelte, or another application adds the button after the initial page load, initialize it after the element exists. The WebSave guide documents window.WebSave.initButton(...) for this case.

// Call after your framework has rendered the button into the DOM.
const button = document.querySelector('.pdfcrowd-websave');
if (button && window.WebSave) {
  window.WebSave.initButton(button);
}

Load the WebSave script before initialization, and run the initialization after the relevant component mounts. If the component is recreated, initialize the newly inserted button as well.

Test the integration before launch

1. Serve the page over HTTPS. WebSave requires HTTPS.
2. Start with a public page and the demo key to confirm that the button appears and the flow starts; expect a watermark in the resulting PDF.
3. Switch to the personal key and verify the exact production hostname and subdomain scope.
4. Test URL mode and content mode separately if both are relevant.
5. Check a page with responsive layout, delayed content, long content, and any assets that require authentication.
6. Verify download, current-tab, or new-tab behavior and review filename, paper size, and margins.
7. For content mode, inspect the submitted page state and ensure your data-handling decisions cover any user-specific values.

Troubleshooting

Symptom	Likely cause	Fix
The button or conversion does not work on a local page	The page is served over HTTP or the server-side converter cannot reach localhost.	Use HTTPS and test a publicly reachable deployment. A conversion service cannot fetch your machine’s localhost.
The key is rejected	The key’s configured domain does not match the page host, or the requested subdomain is outside its scope.	Check the exact hostname, including subdomain, against the key configuration and adjust the key scope as needed.
The PDF omits login-only content	URL mode fetches independently and does not share the visitor’s authenticated session.	Use content mode if appropriate, and account for protected assets and the fact that current HTML is sent for conversion.
Form entries are missing	URL mode cannot see the visitor’s current input values.	Use content mode when the current values should be in the PDF, after considering the data sent to the conversion service.
New or interactive content is absent	The content was not present in the HTML at conversion time, or it requires an interaction or later load.	Wait for the content before initializing/capturing, consider content mode, or use a documented JavaScript delay. Confirm the content exists in the HTML being converted.
The layout differs from the live page	The conversion is a fresh rendering, possibly at a different viewport width or with unavailable assets.	Check responsive breakpoints and asset accessibility; choose a suitable viewport and inspect the resulting PDF.
The button is missing in a single-page app	The framework inserted it after WebSave’s initial page scan.	After rendering, call window.WebSave.initButton(button) for the inserted button.
The PDF has a watermark	The integration is using the demo key.	Use a personal key configured for your domain.

Performance, reliability, and cost considerations

The conversion requires a page fetch or submission and a new rendering, so its completion depends on page availability, asset access, and dynamic-content timing. The available WebSave material does not provide an independent performance benchmark or reliability guarantee; measure representative pages in your own deployment and handle a failed conversion with a clear retry path.

Reduce avoidable delays by limiting unnecessary asynchronous content on the export path and using only the wait needed for required content. Test long pages and large assets, since their conversion has more work to render. Confirm the current PDFCrowd plan and pricing directly before estimating cost; no pricing terms are asserted here.

Or skip the browser setup

If what you need is an image or PDF capture from a URL in your own workflow, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF. See the API documentation for parameters and response details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo returned ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

• Cookie banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers report the page verdict and billing status.
• An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
• The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000; every feature is available on every plan.

Sign up for 1,000 free screenshots a month, with no card.

FAQ

Can visitors use WebSave on any website?

No. WebSave is an integration the website owner adds to a site. It is not a universal save command for pages where the button has not been installed.

Does WebSave create a screenshot?

No. It converts available page HTML into a newly rendered PDF. It does not capture every pixel or replay every interaction from the visitor’s screen.

Will URL mode include query parameters?

URL mode supports URL parameters. Content mode does not.

Can I use the demo key in production?

The demo key is for trying the integration and produces watermarked PDFs. Use a personal key configured for your site for production use.

Is WebSave the same as the WebSave mobile app or browser extension?

No. This article describes PDFCrowd’s website integration. Products with the same or similar name are separate tools.