# Feedback Widget System

A modular, functional JavaScript feedback widget system that can be easily integrated into any website.

## Features

- Clean, modular architecture
- Functional programming approach
- Better separation of concerns
- Improved error handling
- Fixed click outside detection
- Optimized performance

## Project Structure

\`\`\`
src/
├── index.js                # Main entry point
├── components/
│   ├── button.js           # Button component
│   ├── icons.js            # SVG icons
│   ├── modal.js            # Modal component
│   ├── ui.js               # UI elements
│   └── widget.js           # Main widget component
├── config/
│   └── index.js            # Configuration and constants
├── styles/
│   └── index.js            # CSS styles
└── utils/
    ├── dom.js              # DOM manipulation utilities
    ├── helpers.js          # General helper functions
    └── storage.js          # Storage and data utilities
\`\`\`

## Usage

\`\`\`javascript
// Initialize the widget
const widget = window.FeedbackWidget({
  projectSecret: "your-project-secret",
  position: "bottom-right",
  primaryColor: "#0F8CFF",
  buttonText: "Feedback",
  buttonIcon: "feedaura"
});

// Destroy the widget
widget.destroy();

// Update configuration
widget.updateConfig({
  position: "top-right",
  primaryColor: "#FF4757"
});
\`\`\`

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| projectSecret | string | "" | API key for the feedback service |
| position | string | "bottom-right" | Widget position (bottom-right, bottom-left, top-right, top-left) |
| primaryColor | string | "#0F8CFF" | Primary theme color |
| secondaryColor | string | "#0070E0" | Secondary theme color |
| textColor | string | "#333333" | Text color |
| backgroundColor | string | "#FFFFFF" | Background color |
| theme | string | "light" | Widget theme (light, dark) |
| buttonText | string | "" | Button text |
| buttonIcon | string | "feedaura" | Button icon (feedaura, heart, none) |
| iconColor | string | "#FFFFFF" | Icon color |
| buttonSize | string | "small" | Button size (small, medium, large) |
| buttonRadius | string | "50%" | Button border radius |
| widgetStyle | string | "floating" | Widget style (floating, minimal) |
| zIndex | number | 9999 | CSS z-index |
| autoCloseAfterSubmit | boolean | true | Auto close after submission |
| apiEndpoint | string | "https://feedaura.feedaura-ai.workers.dev/feedbacks" | API endpoint |
| animated | boolean | true | Enable animations |
| placeholder | string | "Please write here" | Textarea placeholder |
| submitText | string | "Submit" | Submit button text |
| headerText | string | "Give us your feedback" | Modal header text |
| questionText | string | "What was your experience while using our product?" | Question text |
| feedbackLabelText | string | "Write your feedback" | Feedback label text |