[Skip to content](https://docs.launchbrightly.com/product-screenshots-api/options#VPContent)

On this page

# Screenshot rendering Options [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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**](https://docs.launchbrightly.com/product-screenshots-api/options#basic-options)<br>The essential settings required to take a screenshot, such as specifying the URL, setting dimensions, and choosing the output format. |
| [**Styling Options**](https://docs.launchbrightly.com/product-screenshots-api/options#styling-options)<br> Customize the appearance of your screenshots by adding margins, padding, background colors, and other visual elements. |
| [**Steps Options**](https://docs.launchbrightly.com/product-screenshots-api/options#steps-options)<br> Define a sequence of automated actions to execute on the page (e.g., clicks, scrolling, or type) before capturing the screenshot. |
| [**Full Page Options**](https://docs.launchbrightly.com/product-screenshots-api/options#full-page-options)<br> Options to modify the page state before taking a screenshot. |
| [**Annotation Options**](https://docs.launchbrightly.com/product-screenshots-api/options#annotation-options)<br> Annotate your screenshot with rectangles, arrows, or text to highlight specific areas or add context to your screenshots. |
| [**Debugging Options**](https://docs.launchbrightly.com/product-screenshots-api/options#debugging-options)<br>Enable tools and logging to help identify and resolve rendering issues or errors during the screenshot process. |
| [**Storage Options**](https://docs.launchbrightly.com/product-screenshots-api/options#storage-options)<br> Save your screenshots directly to external storage solutions like Amazon S3 or Cloudflare R2 for easy access and management. |
| [**Transformation Options**](https://docs.launchbrightly.com/product-screenshots-api/options#transformation-options)<br> Apply post-processing transformations to your screenshots including cropping, resizing and format conversion |

* * *

## Basic Options: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#basic-options)

* * *

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

### **`url`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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\
      }\
  ]
}'
```

## `blockUrls` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#blockurls)

The `blockUrls` property allows you to block the underlying network requests when a page is being loaded. This helps improve reliability, performance, and privacy by preventing unwanted third-party content from loading.

### How It Works [​](https://docs.launchbrightly.com/product-screenshots-api/options\#how-it-works)

- The API maintains a global blocklist, which is an array of string patterns (substrings).
- For each screenshot request, the API merges this global blocklist with any user-supplied `blockUrls` provided in the request payload.
- The combined list is deduplicated and used to block any network request whose URL contains any of the listed substrings (case-sensitive match).
- The block is performed at the network request level, preventing matching resources from loading in the browser context.
- The global blocklist currently contains only YouTube embeds, where we block background network requests to prevent streaming. The player still displays, and the thumbnail and all related visuals are rendered for the screenshot.

```
[\
    "youtube.com/embed"\
]
```

### Usage [​](https://docs.launchbrightly.com/product-screenshots-api/options\#usage)

You can specify additional URLs to block by including a `blockUrls` array in the payload. The API will always apply the global blocklist, even if the user does not supply any `blockUrls`.

#### Example [​](https://docs.launchbrightly.com/product-screenshots-api/options\#example)

If the global `blockRules` is `["youtube.com/embed"]` and the user sends `blockUrls: ["ads.example.com"]`, both patterns will be blocked for that request.

json

```
{
  "url": "https://example.org",
  "blockUrls": [\
    "ads.example.com",\
    "tracker.example.com"\
  ]
}
```

### Scenarios Where `blockUrls` Is Useful [​](https://docs.launchbrightly.com/product-screenshots-api/options\#scenarios-where-blockurls-is-useful)

1. **Blocking Video Embeds**

- _Scenario_: You want to capture a screenshot of a page, but it contains embedded YouTube or Vimeo videos that slow down loading.
   - _How `blockUrls` helps_: Add `youtube.com/embed` or `vimeo.com/embed` to block these video frames from loading, resulting in faster and cleaner screenshots.
2. **Preventing Ads and Trackers**

- _Scenario_: The page includes third-party ads or tracking scripts (e.g., from `ads.example.com` or `tracker.example.com`) that clutter the screenshot, or you want to prevent bot hits from appearing in Google Analytics.
- _How `blockUrls` helps_: Add ad or tracker domains to the blocklist to prevent them from loading. This ensures screenshots are ad-free and results in more accurate data in Google Analytics.

3. **Improving Performance and Reliability**

- _Scenario_: Some third-party resources are slow, unreliable, or cause timeouts (e.g., heavy analytics scripts, social widgets).
   - _How `blockUrls` helps_: Block these slow or problematic resources to speed up screenshot capture and reduce the risk of errors or timeouts.
4. **Reducing Bandwidth and Resource Usage**

- _Scenario_: You want to minimize bandwidth usage or resource consumption during screenshot capture, especially for bulk jobs.
   - _How `blockUrls` helps_: Block unnecessary resources (like large images, videos, or scripts) to reduce data transfer and speed up processing.

## Styling Options: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#styling-options)

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

### **`margin`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#backgroundcolor)

Sets the primary background color for the screenshot.

default: `solid`

Possible values: `solid` or `gradient` .

See Example

bash

### **`backgroundColor2`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#shadowcolor)

Specifies the color of the shadow.

default: `#0f172a5e`

See Example

bash

### **`shadowBlur`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#shadowblur)

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

```
default: `0`
```

See Example

bash

### **`shadowOffsetX`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#shadowoffsetx)

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

```
  default: `0`
```

See Example

bash

### **`shadowOffsetY`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#shadowoffsety)

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

```
  default: `0`
```

See Example

bash

## Steps Options: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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"\
          ]\
      }\
  ]
}'
```

Our API dynamically calculates the center of the element and clicks there:

javascript

```
const centerX = box.width / 2; // Center X relative to content box
const centerY = box.height / 2; // Center Y relative to content box
```

This should work in most cases. However, if you need to click a very specific coordinate within an element (for example, on a small button inside a larger container), you may need to identify a more suitable inner element for the click.

### Step: **`hover`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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](https://www.toptal.com/developers/keycode/table)\] (third-column: `Code`)

### Step: **`keyUp`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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"\
          ]\
      }\
  ]
}'
```

#### Step: **`write`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: **`scrollTo`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#step-scrollto)

This step will scroll to a selector of your choice.

###### When to use it: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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`)

bash

```
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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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"\
          ]\
      }\
  ]
}'
```

### Step: **`selectText`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#step-selecttext)

The `selectText` property allows you to visually emphasize specific text on a webpage during the screenshot process. This can be useful for drawing attention to key information or demonstrating specific functionality in your documentation or application.

The text to be highlighted is case-sensitive. If the specified text appears multiple times within the defined selector, only the first occurrence will be highlighted.

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": "selectText",\
          "selectors": [\
              "h1"\
          ],\
          "value": "Domain"\
      }\
  ]
}'
```

### Step: **`swipe`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#step-swipe)

The `swipe` step simulates a swipe gesture on an element, commonly used for interacting with carousels, sliders, and swipeable components in web applications. This step is particularly useful for capturing screenshots of different slides or states in a carousel.

#### Parameters [​](https://docs.launchbrightly.com/product-screenshots-api/options\#parameters)

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| type | string | Yes | Must be `"swipe"` |
| direction | string | Yes | Swipe direction: `"left"` or `"right"` |
| selectors | string\[\] | Yes | CSS, ARIA, or XPath selectors for the element to swipe |
| frame | array | No | Frame selector if the element is inside an iframe |
| timeout | number | No | Maximum time in milliseconds to wait for the element (default: 30000) |

#### When to use it: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#when-to-use-it-1)

- Interacting with image carousels or sliders
- Navigating through swipeable galleries
- Capturing different slides in a slideshow
- Testing touch-based navigation in responsive designs

Example 1: Swipe to Slide 2

bash

```
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Accept: image/png' \
--header 'Content-Type: application/json' \
--data '{
    "responseType": "image",
    "deviceScaleFactor": 1,
    "steps": [\
        {\
            "type": "navigate",\
            "url": "https://example.com/slider-page"\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        },\
        {\
            "type": "swipe",\
            "direction": "right",\
            "selectors": [\
                ".slider"\
            ],\
            "timeout": 10000\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        }\
    ]
}'
```

Example 2: Swipe to Slide 3 (multiple swipes)

bash

```
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Accept: image/png' \
--header 'Content-Type: application/json' \
--data '{
    "responseType": "image",
    "deviceScaleFactor": 1,
    "steps": [\
        {\
            "type": "navigate",\
            "url": "https://example.com/slider-page"\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        },\
        {\
            "type": "swipe",\
            "direction": "right",\
            "selectors": [\
                ".slider"\
            ],\
            "timeout": 10000\
        },\
        {\
            "type": "waitFor",\
            "value": 1000\
        },\
        {\
            "type": "swipe",\
            "direction": "right",\
            "selectors": [\
                ".slider"\
            ],\
            "timeout": 10000\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        }\
    ]
}'
```

Example 3: Swipe right then left (navigate back)

bash

Example 4: Swipe inside an iframe

bash

```
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Accept: image/png' \
--header 'Content-Type: application/json' \
--data '{
    "responseType": "image",
    "deviceScaleFactor": 1,
    "steps": [\
        {\
            "type": "navigate",\
            "url": "https://example.com/page-with-iframe"\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        },\
        {\
            "type": "swipe",\
            "direction": "right",\
            "frame": [\
                "iframe#demo-iframe",\
                "xpath///*[@id=\"demo-iframe\"]"\
            ],\
            "selectors": [\
                "body"\
            ],\
            "timeout": 10000\
        },\
        {\
            "type": "waitFor",\
            "value": 2000\
        }\
    ]
}'
```

#### Notes: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#notes)

- The swipe gesture simulates touch-based interaction commonly used on mobile devices
- Use `waitFor` steps between consecutive swipes to allow animations to complete
- Supports all selector types: CSS, ARIA (prefix with `aria/`), and XPath (prefix with `xpath/`)
- Can be used within iframes by specifying the `frame` parameter
- Multiple swipes can be chained together to navigate through multiple slides

## Full Page Options [​](https://docs.launchbrightly.com/product-screenshots-api/options\#full-page-options)

* * *

Advanced options to control how the API captures full-page screenshots.

### `fullPageAlgo` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`

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",
  "fullPageAlgo": "default",
  "responseType": "image"
}'
```

Using `fullPageAlgo:stitch`

bash

### `fullPageScroll` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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` [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

bash

```
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 [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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 [​](https://docs.launchbrightly.com/product-screenshots-api/options\#types-of-image-annotation)

We currently support the following types of annotation:

- Rectangle
- Arrow
- Enumeration
- Text
- Watermark
- modifyText
- blur

#### List of supported attributes [​](https://docs.launchbrightly.com/product-screenshots-api/options\#list-of-supported-attributes)

You can customize each [annotation type](https://docs.launchbrightly.com/product-screenshots-api/options#types-of-image-annotation) 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. |
| `groupOfSelectors` | `-` | `rectangle`, `arrow`, `enumeration`, `blur` | Annotate a group of selectors. |

### Annotate: **`rectangle`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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)"\
          ]\
      }\
  ]
}'
```

#### Annotate: **`callout`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#annotate-callout)

An arrow with an attached text bubble.

Callout with custom text

Set a custom text with callout

bash

```
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1536,
  "height": 864,
  "headless": true,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "steps": [\
      {\
          "type": "navigate",\
          "url": "http://example.org"\
      },\
      {\
          "type": "waitFor",\
          "value": 3000\
      }\
  ],
  "annotate": [\
      {\
          "type": "callout",\
          "selectors": [\
              "a"\
          ],\
          "message": "Hello World"\
      }\
  ]
}'
```

Set a green callout

bash

```
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{
  "width": 1536,
  "height": 864,
  "headless": true,
  "deviceScaleFactor": 1,
  "responseType": "image",
  "steps": [\
      {\
          "type": "navigate",\
          "url": "http://example.org"\
      },\
      {\
          "type": "waitFor",\
          "value": 3000\
      }\
  ],
  "annotate": [\
      {\
          "type": "callout",\
          "selectors": [\
              "a"\
          ],\
          "message": "Hello World In Green",\
          "color": "green"\
      }\
  ]
}'
```

## Debugging Options: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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](https://docs.launchbrightly.com/product-screenshots-api/create-storage-tokens).

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

## Transformation Options: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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 [​](https://docs.launchbrightly.com/product-screenshots-api/options\#_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

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 > div"\
],
"crop": {
  "top": 80,
  "left": 25,
  "right": 25,
  "bottom": 70
}
}'
```

### 2\. Crop using bounding box [​](https://docs.launchbrightly.com/product-screenshots-api/options\#_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

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 > div"\
],
"crop": {
  "x": 30,
  "y": 45,
  "width": 565,
  "height": 150
}
}'
```

### **`maxHeight`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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 [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

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 > div"\
],
 maxHeight: 200
}'
```

Limit height using the long syntax, in px

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 > div"\
],
maxHeight: {
      value: 500,
      unit: 'px'
  }
}'
```

Limit height using the long syntax, in vh

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 > div"\
],
maxHeight: {
      value: 2,
      unit: 'vh'
  }
}'
```

### **`thumbnail`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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

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 > div"\
],
 thumbnail: {
      width: 500,
      height: 500,
      fit: 'contain'
    }
}'
```

### **`format`** [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#for-jpeg)

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

##### For WebP: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#for-tiff)

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

##### For AVIF: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#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: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#for-heif)

##### For PNG: [​](https://docs.launchbrightly.com/product-screenshots-api/options\#for-png)

No extra options are supported for \`PNG.

* * *

WebP as the output format (short syntax)

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 > div"\
],
 format: "webp"
}'
```

JPEG as the output format (short syntax)

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 > div"\
],
 format: "jpeg"
}'
```

WebP as the output format (long syntax)

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 > div"\
],
"format": {
  "type": "webp",
  "quality": 100,
  "lossless": true,
  "effort": 6
}
}'
```

WebP as the output format (long syntax)

bash

AVIF as the output format (long syntax)

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 > div"\
],
"format": {
  "type": "avif",
  "quality": 80,
  "lossless": false,
  "effort": 3
}
}'
```