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.

---

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.

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: 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"
  }
}'