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.
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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

bash

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

Screenshot rendering Options ​

Basic Options: ​

url ​

width ​

height ​

elementSelector ​

userAgent ​

timeout ​

maxRetryCount ​

prefersColorScheme ​

deviceScaleFactor ​

acceptLanguage ​

geolocation.latitude ​

geolocation.longitude ​

geolocation.accuracy ​

metadata ​

css.animations ​

css.borderRadius ​

elementFrame ​

Styling Options: ​

Steps Options: ​

Step: navigate ​

Step: change ​

Step: click ​

Step: hover ​

Step: keyDown ​

Step: keyUp ​

Step: write ​

Step: waitFor ​

Step: waitForElement ​

Step: hideElement ​

Step: removeElement ​

Annotation Options ​

Types of Image Annotation ​

List of supported attributes ​

Annotate: rectangle ​

Annotate: arrow ​

Annotate: enumeration ​

Annotate: text ​

Annotate: watermark ​

Annotate: modifyText ​

Annotate: blur ​

Debugging Options: ​

Storage Options: ​

Screenshot rendering Options

Basic Options:

`url`

`width`

`height`

`elementSelector`

`userAgent`

`timeout`

`maxRetryCount`

`prefersColorScheme`

`deviceScaleFactor`

`acceptLanguage`

`geolocation.latitude`

`geolocation.longitude`

`geolocation.accuracy`

`metadata`

`css.animations`

`css.borderRadius`

`elementFrame`

Styling Options:

Steps Options:

Step: `navigate`

Step: `change`

Step: `click`

Step: `hover`

Step: `keyDown`

Step: `keyUp`

Step: `write`

Step: `waitFor`

Step: `waitForElement`

Step: `hideElement`

Step: `removeElement`

Annotation Options

Types of Image Annotation

List of supported attributes

Annotate: `rectangle`

Annotate: `arrow`

Annotate: `enumeration`

Annotate: `text`

Annotate: `watermark`

Annotate: `modifyText`

Annotate: `blur`

Debugging Options:

Storage Options: