# Aminah by Uxbert Labs

> **Bug reporting that works for Everyone**

Transform how your team handles bug reports. Just one line of code. Let users capture, annotate, and submit issues in seconds while you focus on fixing them.

[![NPM Version](https://img.shields.io/npm/v/@uxbertlabs/aminah)](https://www.npmjs.com/package/@uxbertlabs/aminah)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![GitHub Stars](https://img.shields.io/github/stars/Uxbert-Engineering/aminah)](https://github.com/Uxbert-Engineering/aminah)

**Website:** [https://aminah.uxbert.com](https://aminah.uxbert.com)
**Repository:** [https://github.com/Uxbert-Engineering/aminah](https://github.com/Uxbert-Engineering/aminah)
**Powered by:** [Uxbert Labs](https://uxbert.com)

---

## Why Aminah?

- ⚡ **Lightning Fast Setup** - Add one line of code. That's it.
- 🎨 **Visual Context** - Users draw, highlight, and annotate directly on screenshots
- 🔌 **Smart Integration** - Automatically creates tickets in Jira, Linear, GitHub via webhooks
- 📊 **Rich Metadata** - Captures browser info, console logs, network requests automatically
- 👥 **Team Collaboration** - Assign, prioritize, and track issues in real-time
- 🎬 **Session Replay** - Watch exactly what happened before the bug

## Features

- **Floating Action Button** - Always accessible, non-intrusive widget
- **Auto Screenshot** - Captures the current page instantly with annotations
- **Drawing Tools** - Pen, arrows, rectangles, and color picker
- **Device Context** - Auto-captures browser, OS, screen resolution, and viewport
- **JSON Export** - Download complete issue reports locally
- **Webhook Integration** - Connect to n8n, Zapier, or custom webhooks
- **Session Recording** - Replay user actions leading to the bug
- **Console Logs** - Automatic capture of browser console output

---

## Quick Start

**Seriously, it's this simple.** Add this before your closing `</body>` tag and you're done:

```html
<!-- Aminah Bug Reporter -->
<script src="https://cdn.jsdelivr.net/npm/@uxbertlabs/aminah/dist/aminah.standalone.min.js"></script>
<script>
  Aminah.init({
    webhook: "https://your-webhook-url.com",
    position: "bottom-right",
    features: {
      screenshots: true,
      annotations: true,
      sessionReplay: true,
      metadata: true,
    },
  });
</script>
```

**Setup time: ~2 minutes** | **Bundle size: ~3KB gzipped**

---

## Installation

### NPM Package

Perfect for React, Vue, Angular, or any modern JavaScript framework:

```bash
npm install @uxbertlabs/aminah
```

**React/TypeScript Usage:**

```tsx
import Aminah from "@uxbertlabs/aminah";
// Import styles - choose one of these methods:
import "@uxbertlabs/aminah/styles"; // Recommended
// or: import "@uxbertlabs/aminah/aminah.css";
// or: import "@uxbertlabs/aminah/dist/aminah.css";

function App() {
  return (
    <div>
      {/* Your app content */}
      <Aminah
        config={{
          webhook: "https://your-webhook-url.com",
          ui: {
            position: "bottom-right",
            theme: "light",
          },
        }}
      />
    </div>
  );
}
```

### CDN (Script Tag)

Perfect for static sites, WordPress, or vanilla JavaScript:

```html
<script src="https://cdn.jsdelivr.net/npm/@uxbertlabs/aminah/dist/aminah.standalone.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uxbertlabs/aminah/dist/aminah.css" />
<script>
  Aminah.init({
    webhook: "https://your-webhook-url.com",
    ui: {
      position: "bottom-right",
      theme: "light",
    },
  });
</script>
```

---

## Configuration

```javascript
Aminah.init({
  // Required
  webhook: "YOUR_WEBHOOK_URL", // n8n, Zapier, or custom endpoint

  // UI Customization
  ui: {
    position: "bottom-right", // 'bottom-left', 'top-right', 'top-left'
    theme: "light", // 'light' or 'dark'
    zIndex: 9999,
  },

  // Feature Toggles
  features: {
    screenshots: true,
    annotations: true,
    sessionReplay: true,
    metadata: true,
    consoleLogs: true,
  },
});
```

---

## API Reference

### Core Methods

```javascript
// Initialize Aminah
Aminah.init(config);

// Manually open the bug reporter
Aminah.open();

// Close the bug reporter
Aminah.close();

// Update configuration
Aminah.updateConfig({ ui: { theme: "dark" } });

// Destroy instance
Aminah.destroy();
```

### Issue Management

```javascript
// Get saved issues
const issues = Aminah.getSavedIssues();

// Export all issues
Aminah.exportAllIssues();

// Clear saved issues
Aminah.clearSavedIssues();
```

### Event Listeners

```javascript
// Issue created
Aminah.on("issue:created", (issue) => {
  console.log("New issue:", issue);
});

// Screenshot captured
Aminah.on("screenshot:captured", (screenshot) => {
  console.log("Screenshot:", screenshot);
});

// Reporter opened/closed
Aminah.on("reporter:opened", () => {});
Aminah.on("reporter:closed", () => {});

// Errors
Aminah.on("error", (error) => {
  console.error("Error:", error);
});
```

---

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

---

## License

MIT © [Uxbert Labs](https://uxbert.com)

---

## Support

- **Issues**: [GitHub Issues](https://github.com/Uxbert-Engineering/aminah/issues)
- **Email**: support@uxbert.com
- **Documentation**: [https://aminah.uxbert.com/docs](https://aminah.uxbert.com/docs)

---

## Contributing

Contributions are welcome! Please see the [main repository](https://github.com/Uxbert-Engineering/aminah) for development guidelines.