feedlytic-widget/README.md

Lightweight JavaScript widget for capturing user feedback and exit-intent surveys

# Feedlytic Widget 🚀

A lightweight, modern JavaScript widget for capturing user feedback, contextual comments, and exit-intent surveys.

## Features

- ✨ **Multiple Feedback Types**: Bug reports, feature requests, general feedback
- 📍 **Contextual Comments**: Click anywhere on your page to add location-specific feedback
- 🎨 **Customizable**: Brand colors, positioning, custom text
- 📱 **Responsive**: Works on desktop and mobile devices
- 🔧 **Easy Integration**: Simple script tag or ES module import
- 📸 **Screenshot Capture**: Automatic screenshot generation for better context

## Quick Start

### 🔒 Secure Integration (Recommended)

**Basic Integration:**
```html
<script src="https://cdn.jsdelivr.net/npm/feedlytic-widget@1.1.4/dist/feedlytic.umd.js"></script>
<script>
  // SECURE: Only project ID exposed - no database credentials!
  window.Feedlytic.init({
    projectId: 'your-project-id' // Only this is required
  });
</script>
```

**With Custom Options:**
```html
<script src="https://cdn.jsdelivr.net/npm/feedlytic-widget@1.1.4/dist/feedlytic.umd.js"></script>
<script>
  window.Feedlytic.init({
    projectId: 'your-project-id',
    color: '#your-brand-color',
    position: 'bottom-right',
    customTexts: {
      feedbackTitle: 'Send Feedback',
      submitButton: 'Send'
    }
  });
</script>
```

### Via NPM

```bash
npm install feedlytic-widget
```


## Configuration Options

```javascript
const widget = new feedlyticWidget({
  // Required
  projectId: 'your-project-id',
  
  // Widget Appearance
  color: '#4f46e5',                    // Primary color
  position: 'bottom-right',            // bottom-right, bottom-left, top-right, top-left
  
  // Feature Toggles
  enableFeedback: true,                // Enable feedback button
  enableContextualFeedback: true,      // Enable contextual comments
  enableExitIntent: true,              // Enable exit-intent surveys
  
  // Exit Intent Settings
  exitIntentSensitivity: 2,            // 1-5, higher = more sensitive
  
  // Custom Text
  customTexts: {
    feedbackButton: 'Feedback',
    feedbackTitle: 'Send Feedback',
    feedbackPlaceholder: 'Tell us what you think...',
    submitButton: 'Send',
    cancelButton: 'Cancel',
    contextualModeButton: 'Click to Comment'
  }
});
```

## Methods

```javascript
// Initialize the widget
widget.init();

// Show feedback modal programmatically
widget.showFeedbackModal();

// Enable contextual comment mode
widget.enableContextualMode();

// Disable contextual comment mode
widget.disableContextualMode();

// Test database connection
widget.testConnection().then(isConnected => {
  console.log('Connection status:', isConnected);
});

// Destroy the widget
widget.destroy();
```

## Events

```javascript
// Listen to widget events
widget.on('feedback-submitted', (data) => {
  console.log('Feedback submitted:', data);
});

widget.on('widget-opened', (data) => {
  console.log('Widget opened:', data);
});

widget.on('widget-closed', () => {
  console.log('Widget closed');
});

widget.on('exit-survey-submitted', (data) => {
  console.log('Exit survey submitted:', data);
});
```

## Browser Support

- ✅ Chrome 60+
- ✅ Firefox 60+
- ✅ Safari 12+
- ✅ Edge 79+

## TypeScript Support

Full TypeScript definitions are included:

```typescript
import { feedlyticWidget, feedlyticConfig } from 'feedlytic-widget';

const config: feedlyticConfig = {
  projectId: 'your-project-id',
};

const widget = new feedlyticWidget(config);
```

## Alternative CDN Options

**jsDelivr:**
```html
<script src="https://cdn.jsdelivr.net/npm/feedlytic-widget@1.1.4/dist/feedlytic.umd.js"></script>
```

**unpkg:**
```html
<script src="https://unpkg.com/feedlytic-widget@1.1.4/dist/feedlytic.umd.js"></script>
```

## License

MIT © Pacify Labs

## Support

- 🐛 [Report Issues](https://github.com/pacifylabs/feedlytic/issues)
- 📧 Email: hello@feedlytic.app
- 🌐 Website: [feedlytic.app](https://feedlytic.app)