Code Examples

import React, { useState } from 'react';
import { FeedbackKit } from '@feedbackkit/widget';

function FeedbackWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (feedback) => {
    setIsLoading(true);
    setError('');

    try {
      const result = await FeedbackKit.feedback.submit({
        type: feedback.type,
        priority: feedback.priority,
        title: feedback.title,
        description: feedback.description,
        screenshot: feedback.screenshot,
        metadata: {
          source: 'widget',
          timestamp: new Date().toISOString()
        }
      });

      setIsSubmitted(true);
      console.log('Feedback submitted:', result);
    } catch (err) {
      setError(err.message || 'Failed to submit feedback');
    } finally {
      setIsLoading(false);
    }
  };

  if (isSubmitted) {
    return (
      <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
        <div className="text-green-600 text-2xl mb-2">✅</div>
        <h3 className="text-green-800 font-semibold mb-1">
          Feedback submitted!
        </h3>
        <p className="text-green-700 text-sm">
          Thank you for your feedback. We'll review it shortly.
        </p>
      </div>
    );
  }

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-colors"
      >
        💬
      </button>
      
      {isOpen && (
        <div className="absolute bottom-16 right-0 w-80 bg-white border border-gray-200 rounded-lg shadow-xl p-4">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-semibold">Send Feedback</h3>
            <button
              onClick={() => setIsOpen(false)}
              className="text-gray-400 hover:text-gray-600"
            >
              ✕
            </button>
          </div>
          
          <form onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            handleSubmit({
              type: formData.get('type'),
              priority: formData.get('priority'),
              title: formData.get('title'),
              description: formData.get('description')
            });
          }} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Type
              </label>
              <select name="type" className="w-full px-3 py-2 border border-gray-300 rounded-md">
                <option value="bug">Bug Report</option>
                <option value="feature">Feature Request</option>
                <option value="general">General Feedback</option>
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Priority
              </label>
              <select name="priority" className="w-full px-3 py-2 border border-gray-300 rounded-md">
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
                <option value="critical">Critical</option>
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Title
              </label>
              <input
                name="title"
                type="text"
                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                placeholder="Brief description"
                required
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Description
              </label>
              <textarea
                name="description"
                rows={3}
                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                placeholder="Detailed description..."
                required
              />
            </div>

            {error && (
              <div className="text-red-600 text-sm">
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={isLoading}
              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {isLoading ? 'Submitting...' : 'Submit Feedback'}
            </button>
          </form>
        </div>
      )}
    </div>
  );
}

export default FeedbackWidget;