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 |