Enhanced Feedback System - Advanced Forms Demo

🐛 Bug Report Form

Comprehensive bug reporting with reproduction steps, environment details, and severity classification.

Step-by-step reproduction guide
Expected vs actual behavior
Auto-detected environment info
Severity and urgency levels
Screenshot attachments

✨ Feature Request Form

Structured feature requests with use cases, business impact, and priority assessment.

Detailed use case description
Business impact analysis
Priority classification
Contact information collection
Supporting documentation

🆘 Support Request Form

Professional support ticketing with urgency levels, account information, and full contact details.

Urgency level selection
Account/company information
Contact preferences
Issue categorization
File attachment support

📋 Detailed Feedback Form

Comprehensive feedback collection with all available fields and customization options.

All form fields included
Technical environment capture
Contact information
File attachments
Custom categorization

💬 Basic Feedback Form

Simple and clean feedback form for quick comments and general suggestions.

Minimal required fields
Quick submission
Basic categorization
Mobile optimized
Zero configuration

🔧 Integration Examples

⚡

One-Line Integration

Add to any website with a single script tag

🎨

Multiple Form Types

Bug reports, feature requests, support tickets

📊

Rich Data Collection

Contact info, environment data, attachments

🔒

Secure & Private

API key authentication and data protection

JavaScript Integration

<!-- Load the enhanced widget -->
<script src="/widget-enhanced.js"></script>

<!-- Bug Report Widget -->
<div data-enhanced-feedback-widget
     data-form-type="bug-report"
     data-api-key="your-api-key"
     data-title="Report a Bug"></div>

<!-- Feature Request Widget -->
<div data-enhanced-feedback-widget
     data-form-type="feature-request"
     data-api-key="your-api-key"
     data-title="Request Feature"></div>

<!-- Support Request Widget -->
<div data-enhanced-feedback-widget
     data-form-type="support"
     data-api-key="your-api-key"
     data-title="Get Support"></div>

Programmatic Usage

// Create custom widget instances
const bugReportWidget = new EnhancedFeedbackWidget({
  formType: 'bug-report',
  apiKey: 'your-api-key',
  position: 'bottom-right',
  collectContactInfo: true,
  allowAttachments: true,
  autoCollectTechnical: true
});

// Feature request widget
const featureWidget = new EnhancedFeedbackWidget({
  formType: 'feature-request',
  apiKey: 'your-api-key',
  title: 'Suggest a Feature',
  customFields: [
    { name: 'department', type: 'select', options: ['Sales', 'Support', 'Development'] }
  ]
});

API Integration

// Submit enhanced feedback via API
fetch('/api/public/feedback', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your-api-key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Login form broken on mobile',
    description: 'Unable to submit login form on mobile devices',
    category: 'BUG',
    priority: 'HIGH',
    severity: 'HIGH',
    steps: '1. Open mobile browser\n2. Navigate to login\n3. Fill form\n4. Tap submit',
    expected: 'Should log in successfully',
    actual: 'Nothing happens when tapping submit',
    formType: 'bug-report',
    contactInfo: {
      name: 'John Doe',
      email: 'john@example.com',
      company: 'Acme Corp'
    },
    technicalInfo: {
      userAgent: navigator.userAgent,
      screenResolution: '375x667',
      url: window.location.href,
      domain: window.location.hostname
    },
    sourceDomain: window.location.hostname
  })
});

🚀 Enhanced Feedback System