Documentation

Appearance

Configuration ​

Triggering the widget ​

By default the Capture widget can be triggered using a keyboard shortcut (ctrl + /).

Triggering from an element ​

You can trigger the Capture widget from any element on your page by adding a data-capture-trigger attribute to the element. For example:

html
<button data-capture-trigger>Report an issue</button>

Programatically trigger the widget ​

You may also programatically trigger the widget from your code using the open method of the global Capture object. For example:

javascript
document.getElementById("some-element").addEventListener("click", () => {
  Capture.open();
});

Initial options ​

When you initialize the capture widget, you can pass through several options to configure it's behaviour and appearance. The full list of available options is below:

javascript
window.captureOptions = {
  captureKey: "YOUR_CAPTURE_KEY",
  isEnabled: true,
  graphQLEndpoint: "https://api.myapp.com/graphql",
  widgetPosition: "bottom-right"
  privacyOptions: {
    requestBody: "all",
    responseBody: "all",
    requestHeader: "all",
    responseHeader: "all",
    elementName: "auto",
    inputValue: "all"
  }
}

captureKey ​

This is a unique key that associates an instance of the capture widget with your team's capture dashboard. You can get the captureKey value for your current team on the team settings page.

isEnabled ​

A boolean flag that determines whether the capture widget is active on the current page. By default, this is true but you may set it to false to disable the widget, for example to hide it from visitors to your website who are not members of your team.

graphQLEndpoint ​

If your backend uses GraphQL, you can set this to the URL of your GraphQL endpoint to enable more helpful insights in your bug report. This value may be a string or a regular expression.

When a request with a URL that matches this URL is logged, capture.dev will display the GraphQL operation name in the UI if it is available, and detect the presence of any errors in the response body.

This can be helpful as it is common for GraphQL servers to return a 200 response when the response is not successful, which can make it difficult to find failed requests in your logs.

widgetPosition ​

Determines where on the screen the widget will appear when triggered. Supported values are bottom-right, bottom-left, top-right or top-left.

privacyOptions ​

Override the default privacy options to determine exactly what information is captured on the page when submitting a bug report. More information on the available options can be found below.

Custom privacy controls ​

By default the widget will capture user interactions on your page, as well as network requests. Depending on your setup, these may contain sensitive information that you do not want to be logged.

To prevent this, you can use custom privacy options to redact sensitive information before it is logged. All filtering takes places in the browser so no omitted information ever gets sent to our servers.

In addition, there is some data that is never captured. You can read more about this on our security page.

Below are the available privacy options that can be configured along with their possible values:

requestBody ​

The body of a request sent as part of a network event.

Possible values:

all (default) - Request bodies are captured for all network events

none - Request bodies are not captured for any network events

on-error-only - Request bodies are only captured for network events that return a http status code in the error range

responseBody ​

The body of a response received during a network event.

Possible values

all (default) - Response bodies are captured for all network events

none - Response bodies are not captured for any network events

on-error-only - Request bodies are only captured for network events that return a http status code in the error range

requestHeader ​

Headers sent as part of a network request.

Possible values

all (default) - Header names and values are captured for all network requests

key-only - Header names (for example content-type) are captured but the value of those headers are not

none - No header names or values are captured for any network request

on-error-only - Header names and values are only captured for network events that return a http status code in the error range

responseHeader ​

Headers received in the response of a network event

Possible values

all (default) - Header names and values are captured for all network responses

key-only - Header names (for example content-type) are captured but the value of those headers are not.

none - No header names or values are captured for any network response

on-error-only - Header names and values are only captured for network responses that return a http status code in the error range

elementName ​

For interaction events, Capture will attempt to determine a friendly name for the element based on the page markup. For example, by using the associated label of an input element, or the text content of a button. Use one of the values below to override this behaviour:

Possible values

auto (default) - Allow Capture to automatically determine a friendly name for the element if available.

tag-only - Only the tag name (for example button or input) will be used

inputValue ​

The value of any form elements that have been changed during a user's session.

Possible values

all (default) - The value of all form elements (excluding password fields) will be captured

none - Capture will not include the value of changed inputs in any bug reports