Quickstart

1. Install the package

From your application’s directory:

npm install sightingdev

Use a browser app with an ESM bundler such as Vite or Next.js. No stylesheet import or separate Sighting build step is needed.

2. Prepare your endpoint

Choose an existing backend route or implement one using the server contract. The examples below use /api/feedback.

Installing the SDK does not create this route. It must accept a multipart POST with a PNG, text, and context, and return a 2xx response only after accepting the report.

Run after document.body exists:

import { createFeedback } from 'sightingdev';

const feedback = createFeedback({
  endpoint: '/api/feedback',
});

feedback.mount();

// When your app or view is torn down:
// feedback.destroy();

For React or Next.js, follow the component example so mounting and cleanup happen at the right time.

4. Send a report

Select Report an issue, review the screenshot, enter a description, and choose Send feedback. Confirm your server receives and stores the report. A successful widget response means the endpoint returned 2xx; storage is your server’s responsibility.

5. Mask private sections

<section data-feedback-private>
  Private account details
</section>

Form fields and editable content are masked by default. Other visible content can still appear in the screenshot. See capture limitations.

Next steps

Custom integrations: use your own trigger, preview, or form.
API reference: configure headers, project IDs, and timeouts.
Troubleshooting: diagnose capture and delivery failures.

Start here

Integrate

Reference

1. Install the package

2. Prepare your endpoint

3. Mount the widget

4. Send a report

5. Mask private sections

Next steps

​1. Install the package

​2. Prepare your endpoint

​3. Mount the widget

​4. Send a report

​5. Mask private sections

​Next steps

1. Install the package

2. Prepare your endpoint

3. Mount the widget

4. Send a report

5. Mask private sections

Next steps