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

​
Example

import Doczilla from '@doczilla/node'

const doczilla = new Doczilla('<your token>')

const screenshot = await doczilla.screenshot.direct({
  page: {
    url: 'https://doczilla.app'
  },
  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.

import Doczilla from '@doczilla/node'

const doczilla = new Doczilla('<your token>')

const screenshot = await doczilla.screenshot.direct({
  page: {
    url: 'https://doczilla.app'
  },
  screenshot: {
    element: '#hero',
    viewport: {
      width: 850,
      height: 400,
      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

Was this page helpful?

Product screenshotsFrom HTML