Skip to content
Cloudflare Docs

/snapshot - Take a webpage snapshot

The /snapshot endpoint captures both the HTML content and a screenshot of the webpage in one request. It returns the HTML as a text string and the screenshot as a Base64-encoded image.

Basic usage

  1. Go to https://example.com/.
  2. Inject custom JavaScript.
  3. Capture the rendered HTML.
  4. Take a screenshot.
Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addScriptTag": [
      { "content": "document.body.innerHTML = \"Snapshot Page\";" }
    ]
  }'
{
  "success": true,
  "result": {
    "screenshot": "Base64EncodedScreenshotString",
    "content": "<html>...</html>"
  }
}

Advanced usage

The html property in the JSON payload, it sets the html to <html><body>Advanced Snapshot</body></html> then does the following steps:

  1. Disable JavaScript.
  2. Sets the screenshot to fullPage.
  3. Changes the page size (viewport).
  4. Waits up to 30000ms or until the DOMContentLoaded event fires.
  5. Returns the rendered HTML content and a base-64 encoded screenshot of the page.
Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "<html><body>Advanced Snapshot</body></html>",
    "setJavaScriptEnabled": false,
    "screenshotOptions": {
       "fullPage": true
    },
    "viewport": {
      "width": 1200,
      "height": 800
    },
    "gotoOptions": {
      "waitUntil": "domcontentloaded",
      "timeout": 30000
    }
  }'
{
  "success": true,
  "result": {
    "screenshot": "AdvancedBase64Screenshot",
    "content": "<html><body>Advanced Snapshot</body></html>"
  }
}

Set a custom user agent

You can change the user agent at the page level by passing userAgent as a top-level parameter in the JSON body. This is useful if the target website serves different content based on the user agent.

Many more options exist, like setting HTTP credentials using authenticate, setting cookies, and using gotoOptions to control page load behaviour - check the endpoint reference for all available parameters.