@bugzyio/widget

Official Bugzy widget SDK, for structured QA reporting, automated session capture, and developer-ready bug reports directly from your web application.

What is Bugzy?

Bugzy is a developer-first QA and bug reporting platform designed to streamline manual testing and accelerate issue resolution.

It automatically captures:

• Annotated screenshots
• Session replay
• Console logs
• Network requests
• Environment details

Every reported issue includes full technical context, eliminating back-and-forth between QA and developers.

Bugzy transforms manual testing into a structured, reproducible workflow.

Built for teams that ship fast and fix faster.

Get started at bugzy.io →

Installation

npm install @bugzyio/widget

Quick Start

React / Next.js

import { BugzyWidget } from '@bugzyio/widget/react';

function App() {
  return (
    <>
      <BugzyWidget projectId="YOUR_PROJECT_ID" />
      {/* your app */}
    </>
  );
}

For Next.js, add 'use client' at the top of the file.

Vue

<script setup>
import '@bugzyio/widget';
</script>

<template>
  <bugzy-widget project-id="YOUR_PROJECT_ID"></bugzy-widget>
</template>

Angular

Add CUSTOM_ELEMENTS_SCHEMA to your component or module:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import '@bugzyio/widget';

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <bugzy-widget project-id="YOUR_PROJECT_ID"></bugzy-widget>
    <router-outlet />
  `
})
export class AppComponent {}

Svelte

<script>
  import '@bugzyio/widget';
</script>

<bugzy-widget project-id="YOUR_PROJECT_ID"></bugzy-widget>

Vanilla HTML

<script type="module">
  import '@bugzyio/widget';
</script>

<bugzy-widget project-id="YOUR_PROJECT_ID"></bugzy-widget>

Programmatic

import { init } from '@bugzyio/widget';

const bugzy = init({ projectId: 'YOUR_PROJECT_ID' });

// Remove widget
bugzy.destroy();

Configuration

| Prop / Attribute | Type | Required | Description | |---|---|---|---| | projectId / project-id | string | Yes | Your Bugzy project ID |

You can find your project ID in the Bugzy dashboard.

Requirements

• Any modern browser (Chrome, Firefox, Safari, Edge)
• React 17+ (only if using the React component)

Support

Need help? Reach out to us at [email protected] — we'd love to hear from you.

License

MIT