Feedback Widget

The Feedback component is an interactive widget that allows users to submit feedback, report issues, or suggest improvements directly from your application. It includes screenshot capture functionality and customizable styling.

Features

• Multiple feedback types (suggestions and error reports)
• Built-in screenshot capture
• Customizable appearance and position
• Responsive design
• Easy integration
• User fingerprinting for tracking

Installation

npm install @fingerprintjs/fingerprintjs html2canvas

import { Feedback } from './path-to/feedback';

Basic Usage

// Initialize with default settings
const feedback = new Feedback({
  tracker: yourTrackerInstance,
  position: 'bottom-right',
  themeColor: '#4f46e5',
  buttonText: 'Feedback',
  autoOpen: false
});

Configuration Options

Option	Type	Default	Description
tracker	SystemTracker	Required	The tracker instance for analytics
position	`'bottom-right'	'bottom-left'	'bottom-center'`
themeColor	string	'#4f46e5'	Primary color for the widget
buttonText	string	'Feedback'	Text for the feedback button
autoOpen	boolean	false	Whether to open the feedback form automatically

Methods

toggleFeedbackWindow()

Toggles the visibility of the feedback form.

feedback.toggleFeedbackWindow();

Examples

Basic Implementation

const feedback = new Feedback({
  tracker: yourTrackerInstance,
  themeColor: '#3b82f6',
  buttonText: 'Send Feedback'
});

With Custom Position

const feedback = new Feedback({
  tracker: yourTrackerInstance,
  position: 'bottom-left',
  themeColor: '#10b981',
  autoOpen: true
});

Data Collected

When a user submits feedback, the following data is sent to the server:

• Feedback type (suggestion/error)
• User's description
• Current URL
• Business ID
• User fingerprint (hashed)
• User ID (if available)
• Optional screenshot

Styling

The component includes default styles but can be customized using the following CSS classes:

• .pt-btn - Feedback button
• .pt-window - Main feedback window
• .pt-header - Header section
• .pt-body - Main content area
• .pt-options - Feedback type selection
• .pt-primary - Primary action buttons
• .pt-secondary - Secondary action buttons
• .pt-badge - Selected feedback type badge

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

• FingerprintJS - For generating unique visitor identifiers
• html2canvas - For capturing screenshots

Error Handling

The component includes basic error handling for:

• Missing tracker instance
• Empty feedback submissions
• Screenshot capture failures

Security

• User data is sent over HTTPS
• Fingerprinting is used for anonymous user identification
• No sensitive data is collected without user consent

Customization

You can customize the appearance by overriding the default styles. The component uses the following CSS variables:

:root {
  --pt-primary: #4f46e5; /* Main theme color */
  --pt-text: #333;       /* Text color */
  --pt-border: #eee;     /* Border color */
  --pt-radius: 8px;      /* Border radius */
}