Getting Started

Get BugSpark running in your project in three steps.

1. Create a Project

Sign up at BugSpark Dashboard and create your first project. You will need:

  • A project name (e.g. "My Web App")
  • The domain where your app runs (e.g. myapp.com)

After creation, you will receive an API key that looks like bsk_pub_.... Keep this key handy.

2. Install the Widget

Add the BugSpark widget to your frontend. Choose the method that fits your stack:

Script Tag (simplest)

html
<script
  src="https://cdn.bugspark.dev/widget.js"
  data-project-key="${BUGSPARK_PROJECT_KEY}"
  data-position="bottom-right"
  async
></script>

NPM Package

bash
npm install @bugspark/widget
typescript
import { BugSpark } from "@bugspark/widget";

BugSpark.init({
  projectKey: process.env.BUGSPARK_PROJECT_KEY,
  position: "bottom-right",
});

3. Start Receiving Reports

Once the widget is installed, your users can click the bug button to submit reports. Each report automatically includes:

  • Screenshot with optional annotations
  • Console logs (errors, warnings, info)
  • Network requests (failed calls, slow responses)
  • Device metadata (browser, OS, viewport size)
  • User action timeline (clicks, navigations, form submissions)

View all reports in the Dashboard. Reports are organized by project and can be filtered by severity, status, and date range.


Alternative: Use the CLI

Prefer the terminal? Install the BugSpark CLI to manage everything from the command line:

bash
npm install -g @bugspark/cli
bugspark login
bugspark init

The init command will walk you through project selection and output ready-to-paste widget code. See CLI Installation for the full guide.


Next Steps