feedback-ai/README.md

A framework-agnostic feedback widget with screenshot and annotation capabilities

# Feedback Widget

A modern, framework-agnostic feedback widget that allows users to submit feedback with screenshots and annotations. Perfect for collecting user feedback, bug reports, and feature requests directly from your application.

## Features

- 🎯 Framework-agnostic (works with React, Vue, Angular, Svelte, or vanilla JS)
- 📸 Automatic screenshot capture
- ✏️ Screenshot annotation tools (draw, rectangle, text)
- 📎 Multiple image attachments support
- 🎨 Customizable button appearance and position
- 📱 Responsive design
- 🔒 Secure API key authentication
- 📧 Email delivery of feedback
- 🎯 TypeScript support

## Installation

```bash
npm install feedback-ai
```

## Quick Start

```javascript
import FeedbackWidget from 'feedback-ai';

const feedbackWidget = new FeedbackWidget({
  apiKey: 'your-api-key',
  email: 'feedback@yourdomain.com'
});
```

## Configuration Options

```typescript
interface FeedbackWidgetOptions {
  apiKey: string;        // Required: Your API key
  email: string;         // Required: Email to receive feedback
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';  // Optional: Button position
  buttonColor?: string;  // Optional: Button color (default: '#2196f3')
  buttonSize?: number;   // Optional: Button size in pixels (default: 48)
}
```

## Framework Integration Examples

### React
```jsx
import { useEffect } from 'react';
import FeedbackWidget from 'feedback-ai';

function App() {
  useEffect(() => {
    const feedbackWidget = new FeedbackWidget({
      apiKey: 'your-api-key',
      email: 'feedback@yourdomain.com',
      position: 'bottom-right',
      buttonColor: '#2196f3',
      buttonSize: 48
    });

    // Cleanup on unmount
    return () => {
      // Remove widget if needed
    };
  }, []);

  return <div>Your app content</div>;
}
```

### Vue
```vue
<script>
import FeedbackWidget from 'feedback-ai';

export default {
  mounted() {
    this.feedbackWidget = new FeedbackWidget({
      apiKey: 'your-api-key',
      email: 'feedback@yourdomain.com'
    });
  },
  beforeUnmount() {
    // Clean up if needed
  }
}
</script>
```

### Angular
```typescript
import { Component, OnInit } from '@angular/core';
import FeedbackWidget from 'feedback-ai';

@Component({
  selector: 'app-root',
  template: '<div>Your app content</div>'
})
export class AppComponent implements OnInit {
  private feedbackWidget: FeedbackWidget;

  ngOnInit() {
    this.feedbackWidget = new FeedbackWidget({
      apiKey: 'your-api-key',
      email: 'feedback@yourdomain.com'
    });
  }
}
```

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Build the package
npm run build
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT