Feedback Widget Demo
Test the embeddable feedback widget with different configurations
Widget Controls
Use these buttons to test the widget functionality:
Configuration Options
Customize the widget appearance and behavior:
Integration Code
Copy this code to embed the widget on any website:
<!-- Add this before closing </body> tag -->
<script src="https://your-project-name.vercel.app/widget.js"></script>
<script>
FeedbackWidget.init({
widgetId: 'your-widget-id', // Required: Get from admin dashboard
position: 'bottom-right',
primaryColor: '#00C2A8',
title: 'Feedback',
placeholder: 'Share your feedback...',
showName: true,
showEmail: true
});
</script>
Features Implemented
- ✅ Self-contained JavaScript widget with namespace isolation
- ✅ Floating feedback button with customizable position
- ✅ Slide-out feedback form panel with smooth animations
- ✅ Form fields: Comment (required), Name (optional), Email (optional)
- ✅ Auto-detection of website domain
- ✅ Responsive design for mobile and desktop
- ✅ Dark theme support
- ✅ Enhanced keyboard accessibility (ESC to close, focus trapping)
- ✅ Improved click outside to close functionality
- ✅ Body scroll prevention when widget is open
- ✅ Smooth toggle animations with cubic-bezier easing
- ✅ Toggle functionality with click and keyboard support
- ✅ Mobile-first responsive design with breakpoint optimization
- ✅ Enhanced z-index management (max safe z-index: 2147483647)
- ✅ Comprehensive CSS reset to prevent host site interference
- ✅ Automatic dark/light theme detection and adaptation
- ✅ High contrast and reduced motion accessibility support
- ✅ ARIA attributes for screen readers
- ✅ Focus management and restoration
- ✅ Comprehensive form validation (required fields, email format, length limits, spam detection)
- ✅ Honeypot field for advanced spam bot prevention
- ✅ Real-time validation feedback (blur/input events)
- ✅ Enhanced AJAX submission with CORS handling and retry logic
- ✅ Progressive retry system (3 attempts with 1s, 2s, 4s delays)
- ✅ Widget identifier and metadata tracking
- ✅ Auto-detection of website URL and domain
- ✅ Client-side rate limiting (2s cooldown, 5/hour limit)
- ✅ Automatic form reset after successful submission
- ✅ Custom events (feedbackWidget:opened, feedbackWidget:closed, feedbackWidget:themeChanged, feedbackWidget:submitted, feedbackWidget:submitError)
- ✅ Loading states and success/error messages
- ✅ CSS reset to prevent host site style conflicts
- ✅ Customizable colors, position, and text
Responsive Design Features
- 📱 Mobile-First Approach: Optimized for mobile devices with progressive enhancement
- 🎯 Touch-Friendly Targets: Minimum 48px touch targets on mobile devices
- 📐 Adaptive Sizing: Button and panel sizes adapt to screen size
- 🔄 Smart Positioning: Bottom-center on mobile, configurable on desktop
- 🌙 Theme Detection: Automatic dark/light theme adaptation
- ♿ Accessibility Support: High contrast and reduced motion preferences
- 🛡️ CSS Isolation: Comprehensive reset prevents host site interference
- ⚡ Maximum Z-Index: Ensures widget appears above all content
Form Submission Features
- ✅ Comprehensive Validation: Required fields, email format, length limits, spam detection
- 🚀 AJAX Submission: Asynchronous submission with 30-second timeout
- 🌐 Auto-Detection: Automatically captures website URL and domain
- ⏱️ Rate Limiting: 2-second cooldown, maximum 5 submissions per hour
- 🔄 Smart Reset: Form clears after successful submission
- 🛡️ Error Handling: Network errors, timeouts, server errors
- 📊 Event System: Custom events for submission success/failure
- 🎯 Field Validation: Real-time validation with inline error messages
Accessibility Features
- 🔍 Screen Reader Support: ARIA labels, roles, and properties
- ⌨️ Keyboard Navigation: Tab, Shift+Tab, and ESC key support
- 🎯 Focus Management: Focus trapping within widget when open
- 🔄 Focus Restoration: Returns focus to trigger element when closed
- 🚫 Scroll Prevention: Prevents background scrolling when widget is open
- 📱 Mobile Friendly: Touch-friendly targets and responsive design
Environment Info
Current environment and API configuration:
Environment info will appear here...
Event Monitoring
The widget dispatches custom events that you can listen to:
Event log will appear here...