Skip to main content
Automate the creation of product screenshots effortlessly with the element option for screenshots. See Screenshot options for all available screenshot options.

​
Example

curl --request POST 'https://api.doczilla.app/v1/screenshot' \
  --header 'Authorization: Bearer <your token>' \
  --header 'Content-Type: application/json' \
  --output 'element-screenshot.png' \
  --data '{
    "page": {
      "url": "https://doczilla.app",
      "waitForMilliseconds": 600
    },
    "screenshot": {
      "element":"#hero"
    }
  }'

​
Output

​
Optimise the output

To optimize the output with for example more paddings around the element, the viewport option in combination with the overlay option can be used. 
curl --request POST 'https://api.doczilla.app/v1/screenshot' \
  --header 'Authorization: Bearer <your token>' \
  --header 'Content-Type: application/json' \
  --output 'element-screenshot-optimised.png' \
  --data '{
    "page": {
      "url": "https://doczilla.app",
      "waitForMilliseconds": 600
    },
    "screenshot": {
      "element":"#hero",
      "viewport": {
        "width": 850,
        "height": 600,
        "deviceScaleFactor": 2
      },
      "overlay": {
        "background":"#000",
        "margin": 0
      }
    }
  }'

Providing the viewport option will make sure the screenshot is taken with that viewport, afterwards that viewport is used as size to add the background to. We are setting margin to 0 as otherwise the default value will increase the viewport of the background.

​
Optimised output