Screenshot rendering Options

This page provides an overview of all supported options for the Screenshot API. These options allow you to customize, troubleshoot, and enhance your screenshots to suit your specific requirements.

Options
Basic Options The essential settings required to take a screenshot, such as specifying the URL, setting dimensions, and choosing the output format.
Styling Options Customize the appearance of your screenshots by adding margins, padding, background colors, and other visual elements.
Steps Options Define a sequence of automated actions to execute on the page (e.g., clicks, scrolling, or type) before capturing the screenshot.
Full Page Options Options to modify the page state before taking a screenshot.
Annotation Options Annotate your screenshot with rectangles, arrows, or text to highlight specific areas or add context to your screenshots.
Debugging Options Enable tools and logging to help identify and resolve rendering issues or errors during the screenshot process.
Storage Options Save your screenshots directly to external storage solutions like Amazon S3 or Cloudflare R2 for easy access and management.
Transformation Options Apply post-processing transformations to your screenshots including cropping, resizing and format conversion

---

Basic Options:

---

The essential settings required to take a screenshot, such as specifying the URL, setting dimensions, and choosing the output format.

url

The URL of the website you want to screenshot.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
    "url": "https://example.org"
}'

width

Specifies the viewport width in pixels.

default: 1200

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "width": 1024
}'

height

Specifies the viewport height in pixels.

default: 900

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "height": 800
}'

elementSelector

Captures a screenshot of a specific element on the page, selected using a CSS selector.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "elementSelector" : [
      "div"
  ]
}'

userAgent

Overrides the default user agent string used by the browser.

default: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://www.web-api.eu/mybrowser",
  "userAgent": "Opera/9.60 (Windows NT 6.0; U; en) Presto/2.1.1"
}'

timeout

Sets the maximum waiting time (in milliseconds) to capture a screenshot.

default: 60000

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "timeout": 5000
}'

maxRetryCount

Defines the number of retries to attempt if capturing the screenshot fails. The default value is 1 (retries are disabled). Each retry is delayed by 5 minutes before it starts.

default: 1

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "maxRetryCount": 2
}'

prefersColorScheme

Emulates the light or dark theme of the webpage.

default: light

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '  {
  "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
  "prefersColorScheme": "dark"
}'

deviceScaleFactor

Specifies the device's scale factor.

default: 2 (retina display)

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "deviceScaleFactor": 2
}'

acceptLanguage

This parameter sets the browser's language to the specified value. It updates the accept-language HTTP header, as well as the navigator.userLanguage and navigator.language properties, to match the specified language.

default: en-US

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://bing.com"
      }
  ],
  "acceptLanguage": "fr-FR"
}'

geolocation.latitude

default: null

Sets the latitude used to emulate the Geolocation API

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://bing.com"
      }
  ],
  "geolocation": {
      "latitude": 40.7128,
      "longitude": -74.006,
      "accuracy": 100
  }
}'

geolocation.longitude

default: null

Sets the latitude used to emulate the Geolocation API

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://bing.com"
      }
  ],
  "geolocation": {
      "longitude": -74.006,
      "latitude": 40.7128,
      "accuracy": 100
  }
}'

geolocation.accuracy

default: 100

Sets the accuracy of the Geolocation API, in metres

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://bing.com"
      }
  ],
  "geolocation": {
      "accuracy": 100,
      "latitude": 40.7128,
      "longitude": -74.006,
  }
}'

metadata

Add metadata(EXIF) to the captured image. Support up to 5 keys.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body"
],
"metadata": {
  "id": "xxx",
  "description": "Contact form"
}
}'

css.animations

Configure CSS animation behaviour. Possible values: enabled, disabled and runOnce

default: enabled

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      }
  ],
  "css": {
      "animations": "runOnce"
  }
}'

css.borderRadius

Tweak the border-radius CSS property of the element to screenshot. Possible values: enabled, disabled

default: enabled

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      }
  ],
  "css": {
      "borderRadius": "disabled"
  }
}'

elementFrame

elementFrame is an optional parameter that allows you to capture a screenshot of a specific frame within an iframe

See Example

Example coming soon.

scrollIntoViewDelay

The scrollIntoViewDelay parameter specifies the delay (in milliseconds) before capturing a screenshot, after scrolling the specified element into view. This delay ensures that content has enough time to load or render properly before the screenshot is taken.

When to Use scrollIntoViewDelay:

Use this parameter in scenarios where additional loading time is required for dynamic or asynchronous content after scrolling into view. For example:

• Lazy-loaded images or videos: If the target element contains images or videos that load only after scrolling, adding a delay ensures these elements are fully rendered before capturing the screenshot.
• Complex animations or transitions: When the target element includes CSS animations, transitions, or other effects that need time to complete, a delay allows these to finish before the screenshot is taken.

default: 0 (ms)

WARNING

• The scrollIntoViewDelay parameter is only applied for element screenshot and does not affect full-page screenshots.

• If scrolling is not necessary to capture the screenshot, the delay will be skipped, ensuring no unnecessary waiting time.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "responseType": "image",
  "deviceScaleFactor": 1,
  "scrollIntoViewDelay": 5300,
  "elementSelector": [
      "#countdown-section"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://api-test-fixtures.s3.us-east-1.amazonaws.com/scrollAndSlow.html"
      },
      {
          "type": "waitFor",
          "value": 500
      }
  ]
}'

Styling Options:

Customize the appearance of your screenshots by adding margins, padding, background colors, and other visual elements.

margin

Adds margin around the captured screenshot. Accepts values in pixels.

default: 0

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
   "margin": 20
}'

padding

Adds padding inside the screenshot boundaries. Accepts values in pixels.

default: 0

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "padding": 5
}'

backgroundStyle

Defines the background style, such as gradients or patterns.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "backgroundStyle": "solid",
  "backgroundColor": "red",
  "margin": 20
}'

backgroundColor

Sets the primary background color for the screenshot.

default: solid

Possible values: solid or gradient .

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "backgroundStyle": "solid",
  "backgroundColor": "red",
  "margin": 20
}'

backgroundColor2

Sets a secondary background color, often used for gradients or other complex styles. Specify only when backgroundStyle is gradient

default: #ffffff

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "backgroundStyle": "gradient",
  "backgroundColor": "red",
  "backgroundColor2": "blue",
  "margin": 20,
  "padding": 10
}'

borderRadius

Rounds the corners of the screenshot. Accepts values in pixels.

default: 0

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "backgroundStyle": "gradient",
  "backgroundColor": "red",
  "backgroundColor2": "blue",
  "margin": 20,
  "borderRadius": 10
}'

shadow

Enables or disables the addition of a shadow around the screenshot.

default: false

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "margin": 20,
  "backgroundColor": "#FF3E14",
  "backgroundColor2": "#8F0182",
  "backgroundStyle": "gradient",
  "borderRadius": 15,
  "shadow": true,
  "shadowColor": "#0f172a5e",
  "shadowBlur": 8,
  "shadowOffsetX": 10,
  "shadowOffsetY": 20
}'

shadowColor

Specifies the color of the shadow.

default: #0f172a5e

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "margin": 20,
  "backgroundColor": "#FF3E14",
  "backgroundColor2": "#8F0182",
  "backgroundStyle": "gradient",
  "borderRadius": 15,
  "shadow": true,
  "shadowColor": "#0f172a5e",
  "shadowBlur": 8,
  "shadowOffsetX": 10,
  "shadowOffsetY": 20
}'

shadowBlur

Defines the blur intensity of the shadow. Accepts values in pixels.

default: `0`

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "margin": 20,
  "backgroundColor": "#FF3E14",
  "backgroundColor2": "#8F0182",
  "backgroundStyle": "gradient",
  "borderRadius": 15,
  "shadow": true,
  "shadowColor": "#0f172a5e",
  "shadowBlur": 8,
  "shadowOffsetX": 10,
  "shadowOffsetY": 20
}'

shadowOffsetX

Sets the horizontal offset of the shadow. Accepts values in pixels.

  default: `0`

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "margin": 20,
  "backgroundColor": "#FF3E14",
  "backgroundColor2": "#8F0182",
  "backgroundStyle": "gradient",
  "borderRadius": 15,
  "shadow": true,
  "shadowColor": "#0f172a5e",
  "shadowBlur": 8,
  "shadowOffsetX": 10,
  "shadowOffsetY": 20
}'

shadowOffsetY

Sets the vertical offset of the shadow. Accepts values in pixels.

  default: `0`

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "margin": 20,
  "backgroundColor": "#FF3E14",
  "backgroundColor2": "#8F0182",
  "backgroundStyle": "gradient",
  "borderRadius": 15,
  "shadow": true,
  "shadowColor": "#0f172a5e",
  "shadowBlur": 8,
  "shadowOffsetX": 10,
  "shadowOffsetY": 20
}'

Steps Options:

---

Typically, before taking a screenshot, you might need to log in to a website, navigate to a specific page and click on a link.

The screenshot API allows you to compose a series of steps that mimic the behavior of a user browsing.

Step: navigate

Navigates to a specific web page.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"elementSelector": [
  "div"
],
"steps": [
  {
    "type": "navigate",
    "url": "https://example.org"
  }
]
}'

Step: change

Allows you to change the input field e.g when filling an email or password

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://app.launchbrightly.com/signin"
      },
      {
          "type": "change",
          "value": "hello@example.org",
          "selectors": [
              "#signinForm > div:nth-child(1) > div > div.flex.rounded-md.shadow-sm.mt-1 > div > input"
          ]
      }
  ]
}'

Step: click

Click on an html element e.g a button or a hyperlink.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://tallycount.app/"
      },
      {
          "type": "click",
          "selectors": [
              "button.border-l > svg"
          ]
      }
  ]
}'

Step: hover

Hover over an html element e.g a menu item or a button

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://unixpapa.com/js/testover.html"
      },
      {
          "type": "hover",
          "selectors": [
              "#red"
          ]
      }
  ]
}'

Step: keyDown

A keyDown event is fired when a key is pressed.

Example with single key

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://w3c.github.io/uievents/tools/key-event-viewer.html"
      },
      {
          "type": "click",
          "selectors": [
              "#input"
          ]
      },
      {
          "type": "keyDown",
          "selectors": [
              "#input"
          ],
          "key": "Enter"
      }
  ]
}'

Example with multiple keys

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://w3c.github.io/uievents/tools/key-event-viewer.html"
      },
      {
          "type": "click",
          "selectors": [
              "#input"
          ]
      },
      {
          "type": "keyDown",
          "selectors": [
              "#input"
          ],
          "key": [
              "KeyH",
              "KeyE",
              "KeyL",
              "KeyL",
              "KeyO"
          ]
      }
  ]
}'

The list of key values can be found (here)[https://www.toptal.com/developers/keycode/table] (third-column: Code)

Step: keyUp

A keyUp event is fired when a key is released.

Example with single key

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://w3c.github.io/uievents/tools/key-event-viewer.html"
      },
      {
          "type": "click",
          "selectors": [
              "#input"
          ]
      },
      {
          "type": "keyUp",
          "selectors": [
              "#input"
          ],
          "key": "Enter"
      }
  ]
}'

Example with multiple keys

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://w3c.github.io/uievents/tools/key-event-viewer.html"
      },
      {
          "type": "click",
          "selectors": [
              "#input"
          ]
      },
      {
          "type": "keyUp",
          "selectors": [
              "#input"
          ],
          "key": [
              "KeyH",
              "KeyE",
              "KeyL",
              "KeyL",
              "KeyO"
          ]
      }
  ]
}'

The list of key values can be found (here)[https://www.toptal.com/developers/keycode/table] (third-column: Code)

Step: write

The write step mimics continuous typing of texts with a 200ms delay in between each typed character. This is useful in cases where you are typing in a search box that dynamically shows results as you are typing.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://summernote.org"
      },
      {
          "type": "click",
          "selectors": [
              "div.note-editable"
          ]
      },
      {
          "type": "write",
          "text": "Hello from Launchbrightly!",
          "selectors": [
              "div.note-editable"
          ]
      }
  ]
}'

Step: scrollTo

This step will scroll to a selector of your choice.

When to use it:

• You want to capture a screenshot of type viewport that requires lazy-loading content to be visible first.
• You need to scroll to trigger lazy-loaded content before performing another action, such as click, write, etc.

When not to use it:

• For element screenshots below the fold with lazy-loaded content: Use scrollIntoViewDelay instead to ensure the element is fully loaded and visible before capturing.
• For fullPage screenshots with lazy-loaded content: Use fullPageScroll to scroll through the entire page and load all content before taking the screenshot.

Note:

The scrollTo step is ideal for precise control when scrolling to specific elements on the page. In contrast, fullPageScroll is designed to scroll through the entire page, triggering lazy-loaded content as it progresses. However, keep in mind that fullPageScroll is more time-consuming due to the need to traverse the entire page.

See Example: Scroll to a specific element

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "responseType": "image",
  "deviceScaleFactor": 1,
  "height": 500,
  "captureBeyondViewport": false,
  "steps": [
      {
          "type": "navigate",
          "url": "https://api-test-fixtures.s3.us-east-1.amazonaws.com/stitchAlgoInPixel.html"
      },
      {
          "type": "waitFor",
          "value": 500
      },
      {
          "type": "scrollTo",
          "selectors": [
              "#section6"
          ]
      }
  ]
}'

See Example: Scroll to a specific element (using shortcut: scrollTo)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "responseType": "image",
  "deviceScaleFactor": 1,
  "height": 500,
  "captureBeyondViewport": false,
  "scrollTo": [
      "#section6"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://api-test-fixtures.s3.us-east-1.amazonaws.com/stitchAlgoInPixel.html"
      },
      {
          "type": "waitFor",
          "value": 500
      }
  ]
}'

Step: waitFor

Allows you to pause for x milliseconds.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://vclock.com/timer/"
      },
      {
          "type": "waitFor",
          "value": 5000
      }
  ]
}'

Step: waitForElement

This step wait for the presence (or absence) of a number of elements identified by a selector. For example, the following step waits for the presence of css class .button#login

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://vclock.com/timer/"
      },
      {
          "type": "waitForElement",
          "selectors": [
              "#lbl-time"
          ]
      }
  ]
}'

Step: hideElement

This step hides an HTML element by setting its CSS property to display: none. You can either specify a CSS selector or an XPath expression.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org/"
      },
      {
          "type": "hideElement",
          "selectors": [
              "h1"
          ]
      }
  ]
}'

Step: removeElement

This step completely removes the HTML element from the DOM, which will eventually hide the element. The main difference compared to a hideElement step is that this will cause a change in the layout. You can either specify a CSS selector or an XPath expression.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org/"
      },
      {
          "type": "removeElement",
          "selectors": [
              "h1"
          ]
      }
  ]
}'

Full Page Options

---

Advanced options to control how the API captures full-page screenshots when full_page=true.

fullPageAlgo

Default: default

The default algorithm uses the browser's native method to capture a screenshot of the entire page. This should work well for most cases. The stitch algorithm captures partial screenshots of the page, each with a height of 4096px, and seamlessly merges them into a single screenshot.

Possible values: default and stitch.

Using fullPageAlgo:default

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "fullPageAlgo": "default",
  "responseType": "image"
}'

Using fullPageAlgo:stitch

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "fullPageAlgo": "default",
  "responseType": "image"
}'

fullPageScroll

Default: false

You can scroll the page before capturing a screenshot to load content that uses lazy loading. However, this will increase the time required to take the screenshot.

Possible values: true and false.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1024,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "fullPage": true,
  "fullPageScroll": true,
  "steps": [
      {
          "type": "navigate",
          "url": "https://stripe.com"
      },
      {
          "type": "waitFor",
          "value": 3000
      }
  ]
}'

scroll.distance

Specifies the vertical distance, in pixels, to scroll the page with each step when scrolling is enabled. This property is useful for loading content that appears as the page is scrolled, such as elements using lazy loading.

Default: 300 (pixels)

Example: Setting scroll.distance to 300 will scroll the page by 300 pixels per step before capturing the screenshot.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1024,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "fullPage": true,
  "fullPageAlgo": "stitch",
  "fullPageScroll": true,
  "headless": false,
  "scroll": {
      "distance": 500
  },
  "steps": [
      {
          "type": "navigate",
          "url": "https://stripe.com"
      },
      {
          "type": "waitFor",
          "value": 3000
      }
  ]
}'

scroll.delay

Default: 900 (milliseconds)

Specifies the delay, in milliseconds, between each scroll step when scrolling is enabled. This delay allows time for content, such as elements using lazy loading, to load before the next scroll step occurs.

Example: Setting scroll.delay to 200 will introduce a 200-millisecond pause between each scroll step.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1024,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "fullPage": true,
  "fullPageAlgo": "stitch",
  "fullPageScroll": true,
  "headless": false,
  "scroll": {
      "delay": 2000
  },
  "steps": [
      {
          "type": "navigate",
          "url": "https://stripe.com"
      },
      {
          "type": "waitFor",
          "value": 3000
      }
  ]
}'

scroll.behavior

Default: instant

Defines the scrolling behavior to be used when scrolling the page. This property determines whether the scrolling is smooth or instant for each step.

Possible values: instant: Scrolls instantly without any animation. smooth: Scrolls with a smooth animation effect.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1024,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "fullPage": true,
  "fullPageAlgo": "stitch",
  "fullPageScroll": true,
  "headless": false,
  "scroll": {
      "behaviour": "smooth"
  },
  "steps": [
      {
          "type": "navigate",
          "url": "https://stripe.com"
      },
      {
          "type": "waitFor",
          "value": 3000
      }
  ]
}'

scroll.maxHeight

Default: 16000 (px)

Specifies the maximum height, in pixels, after which scrolling will stop.

Possible use cases:

1. Prevent unnecessary scrolling when there is no lazy-loaded content beyond a certain point, saving execution time.
2. Serve as a safeguard to avoid unintentionally capturing excessively long screenshots.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1024,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "fullPage": true,
  "fullPageAlgo": "stitch",
  "fullPageScroll": true,
  "headless": false,
  "scroll": {
      "maxHeight": 1000
  },
  "steps": [
      {
          "type": "navigate",
          "url": "https://stripe.com"
      },
      {
          "type": "waitFor",
          "value": 3000
      }
  ]
}'

Annotation Options

---

Annotate your screenshot with rectangles, arrows, or text to highlight specific areas or add context to your screenshots.

When putting together a support article that includes images, annotating those images with text, shapes, arrows etc. to call out specific parts of the image is a common use case that allows you can speak to specific parts of a bigger context.

Types of Image Annotation

We currently support the following types of annotation:

• Rectangle
• Arrow
• Enumeration
• Text
• Watermark
• modifyText
• blur

List of supported attributes

You can customize each annotation type by either specifying a list of attributes for all annotations as a global configuration or by applying a specific setting to each annotation.

Option	Default Value	Annotation Type	Description
offset	10	rectangle, arrow, enumeration, text	Specifies padding around the element. Example: 10px.
color	#dc2626	rectangle, arrow, enumeration, text	Specifies the border color for annotations. For blur, the entire area is filled with the specified color.
width	4	rectangle, arrow, enumeration	The border width of the rectangle. Example: 4.
position	bottom	text	Text placement. Possible values: bottom, top.
size	20	text, enumeration, watermark	The size in px of the text.
message	''	text	The message to be displayed.
opacity	0.3	watermark	Specifies the opacity of the watermark.
lineType	curved	arrow	Possible values: curved or straight.
intensity	-	blur	Specifies the blur strength on a scale from 1 to 100.

Annotate: rectangle

Annotate an element with a rectangle.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "rectangle",
          "selectors": [
              "h1"
          ]
      }
  ]
}'

Annotate: arrow

Annotate an element with an arrow.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "arrow",
          "selectors": [
              "h1"
          ]
      }
  ]
}'

Annotate: enumeration

Annotate an element with a number.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "enumeration",
          "selectors": [
              "h1"
          ]
      }
  ]
}'

Annotate: text

Annotate a text to your screenshot.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "text",
          "message": "Hello World",
          "position": "bottom"
      }
  ]
}'

Annotate: watermark

Watermark your screenshot with either an image or a text.

Watermark using an image

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "watermark",
          "image": "https://app.launchbrightly.com/launchbrightly-mark-social-rounded-512px.png",
          "position": "bottom-right",
          "size": 25,
          "offset": 10,
          "opacity": 1
      }
  ]
}'

Watermark using a text

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "watermark",
          "text": "Captured by Launchbrightly  ",
          "position": "bottom-right",
          "size": 13,
          "offset": 0,
          "color": "red"
      }
  ]
}'

Annotate: modifyText

Modify the text attached to a selector.

See Example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "modifyText",
          "selectors": [
              "h1"
          ],
          "value": "Hello World!"
      }
  ]
}'

Annotate: blur

Blur an element.

Blur with solid color

When the Blur intensity is set to 100, the entire selected area will be filled with the specified color, effectively achieving a complete redaction

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "blur",
          "selectors": [
              "body > div > p:nth-child(2)"
          ],
          "intensity": 100,
          "color": "red"
      }
  ]
}'

Classic Blur example

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "url": "https://example.org",
  "annotate": [
      {
          "type": "blur",
          "selectors": [
              "body > div > p:nth-child(2)"
          ]
      }
  ]
}'

Debugging Options:

---

The screenshot API allows you to visually debug at different steps by capturing snapshots of the page.

Set the stepImages attribute to either onError or all to enable capturing snapshots.

stepImages

Capturing snapshots on failure only

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "stepImages": "onError",
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      },
      {
          "selectors": [
              "#fake"
          ],
          "timeout": 10000,
          "type": "waitForElement"
      }
  ]
}'

Capturing snapshots regardless of failure or success

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "stepImages": "all",
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      },
      {
          "selectors": [
              "#fake"
          ],
          "timeout": 10000,
          "type": "waitForElement"
      }
  ]
}'

Storage Options:

---

Save your screenshots directly to external storage solutions like Amazon S3 or Cloudflare R2 for easy access and management. Refer to the instruction on how to generate your tokens before using storage options.

cloud

Specify whether you want to save to Amazon S3 or Cloudflare R2.

Store on Amazon S3

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      }
  ],
  "cloud": {
      "upload": "s3",
      "fileObject": "s3_example_org.png"
  }
}'

Store on Cloudflare R2

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      }
  ],
  "cloud": {
      "upload": "r2",
      "fileObject": "r2_example_org.png"
  }
}'

Transformation Options:

---

crop

The screenshot endpoint allows you to crop your screenshot to preserve the most relevant part of the image. We support two ways of cropping a screenshot.

1. Crop using CSS-like properties

The top, bottom, left, and right values allow you to specify the starting location of the crop. Image dimensions will be calculated from this starting point outward.

• top: Crop from the top of the image, down.
• bottom: Crop from the bottom of the image, up.
• left: Crop from the left of the image, right.
• right: Crop from the right of the image, left.

The width and height are optional. When not specified, it takes the default dimention of the original screenshot.

Crop using CSS-like properties

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
"crop": {
  "top": 80,
  "left": 25,
  "right": 25,
  "bottom": 70
}
}'

2. Crop using bounding box

When it comes to cropping images, bounding boxes are a crucial tool for specifying the area of interest within an image. These bounding boxes are defined by four essential properties: x, y, width, and height. Each of these properties plays a specific role in precisely defining the region you want to crop:

• x: The x coordinate represents the horizontal position of the top-left corner of the bounding box.
• y: The y coordinate represents the vertical position of the top-left corner of the bounding box.
• width: The width property defines the horizontal dimension of the bounding box.
• height: The height property dictates the vertical dimension of the bounding box.

The width and height are optional. When not specified, it takes the default dimention of the original screenshot.

Crop using bounding box

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
"crop": {
  "x": 30,
  "y": 45,
  "width": 565,
  "height": 150
}
}'

maxHeight

This parameter limits the height of the screenshot to a specific value which can either be in px or vh. This is similar to crop but with a simpler syntax if you need to change the height of the screenshot.

Key Differences

Feature	maxHeight	crop
Control	Limits vertical height only	Precise control over a rectangular area
Flexibility	Less flexible (only height)	More flexible (height + width + position)
Supported units	px or vh	px or %
Use Case	General height limitation	Targeted area capture
Implementation	Simple height restriction	Requires specifying exact coordinates

Limit height using the short syntax, in px

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
 maxHeight: 200
}'

Limit height using the long syntax, in px

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
maxHeight: {
      value: 500,
      unit: 'px'
  }
}'

Limit height using the long syntax, in vh

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
maxHeight: {
      value: 2,
      unit: 'vh'
  }
}'

thumbnail

Resize the generated screenshot, in pixel.

thumbnail.width: The width of the generated thumbnail, in pixel.

thumbnail.height: The height of the generated thumbnail, in pixel.

thumbnail.fit: How the screenshot should be resized: cover, contain, fill, inside, outside. Default is cover.

Resize a screenshot

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
 thumbnail: {
      width: 500,
      height: 500,
      fit: 'contain'
    }
}'

format

default: png

Specify the output format for your screenshot. By default, screenshots are delivered as PNG files, but you can choose from several alternative formats.

Available formats: png, jpeg, webp, avif, tiff, heif

You can further tweak these format output if needed.

For JPEG:

Option	Type	Default	Description
format.quality	integer	100	Quality setting, integer between 1-100

For WebP:

Option	Type	Default	Description
format.quality	integer	100	Quality setting, integer between 1-100
format.lossless	boolean	true	Whether to use lossless compression
format.effort	integer	0	CPU effort, between 0 (fastest) and 6 (slowest)

For TIFF:

Option	Type	Default	Description
format.quality	integer	100	Quality setting, integer between 1-100

For AVIF:

Option	Type	Default	Description
format.quality	integer	100	Quality setting, integer between 1-100
format.lossless	boolean	true	Whether to use lossless compression
format.effort	integer	0	CPU effort, between 0 (fastest) and 9 (slowest)

For HEIF:

Option	Type	Default	Description
format.quality	integer	100	Quality setting, integer between 1-100
format.lossless	boolean	true	Whether to use lossless compression
format.effort	integer	0	CPU effort, between 0 (fastest) and 9 (slowest)

For PNG:

No extra options are supported for `PNG.

---

WebP as the output format (short syntax)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
 format: "webp"
}'

JPEG as the output format (short syntax)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
 format: "jpeg"
}'

WebP as the output format (long syntax)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
"format": {
  "type": "webp",
  "quality": 100,
  "lossless": true,
  "effort": 6
}
}'

WebP as the output format (long syntax)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
"format": {
  "type": "webp",
  "quality": 100,
  "lossless": true,
  "effort": 6
}
}'

AVIF as the output format (long syntax)

curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
"url": "https://example.org",
"elementSelector": [
  "body > div"
],
"format": {
  "type": "avif",
  "quality": 80,
  "lossless": false,
  "effort": 3
}
}'