Creating a Capture

Capture supports multiple modes to suit different use cases. Each mode adjusts the UI to match the needs of the type of user reporting the issue.

Customer mode

Customer mode is designed for bug reporting in production environments where the reporter is typically a non-technical end user. The interface is kept simple to make it easy for users to take a screenshot and describe the issue.

All technical context is automatically included in the report. This reduces the need for your team to follow up with the customer for more details.

To enable customer mode, you can use a simple URL parameter or set up your own trigger.

Use a URL parameter

To show the Capture button to a user, add ?capture=true to the end of any URL where the Capture snippet is installed. For example:

https://example.com/dashboard?capture=true

When someone visits a page with this parameter, a floating button will appear in the corner of the screen. Clicking it opens the Capture Widget, where they can submit an issue.

The button stays visible as the user navigates to other pages on your site, so they can still report the issue even if they move away from the original page.

Trigger it manually

If you prefer, you can show the widget using a custom button or trigger in your app. This gives you more control over when and where customer mode appears. See the section on opening the Capture Widget for examples.

Extended mode

Extended mode is intended for internal bug reporting during development. This mode is more powerful and gives team members such as QA testers, product owners, and designers more ways to add context to their reports.

In extended mode, users can:

• Annotate screenshots with drawing tools
• Record screen and audio to include a video walkthrough
• Choose where reports are sent, including configuring settings for third-party integrations
• View the submitted report themselves after it's created

Extended mode is the default mode when installing the Capture Widget. You can use any of the methods below for opening the widget in extended mode.

Opening the Capture Widget

You can control which mode to use when triggering the Capture widget. There are multiple methods for doing this depending on what works best for your users and UI.

1. Using the data-capture-trigger attribute

You can trigger the widget when an element on your page is clicked by using the data-capture-trigger attribute. Set the value of the attribute to the desired mode:

<button data-capture-trigger="customer">Report an issue</button>
<button data-capture-trigger="extended">Report an issue</button>

2. Use a keyboard shortcut

If no custom trigger is set up, the Capture widget is always accessible via a keyboard shortcut:

• Ctrl + Alt + 1 on Windows
• Cmd + Option + 1 on Mac

You can specify the default mode to use by setting it in the window.captureOptions object when initializing the widget:

window.captureOptions = {
  captureKey: "{YOUR_CAPTURE_KEY}",
  mode: "extended",
};

3. Opening the widget programmatically

You can also open the widget directly in JavaScript by calling the Capture.open() function.

Capture.open({ mode: "customer" });