Feedlytic Widget 🚀

A lightweight, modern JavaScript widget for capturing user feedback, contextual comments, and exit-intent surveys.

Features

• ✨ Multiple Feedback Types: Bug reports, feature requests, general feedback
• 📍 Contextual Comments: Click anywhere on your page to add location-specific feedback
• 🎨 Customizable: Brand colors, positioning, custom text
• 📱 Responsive: Works on desktop and mobile devices
• 🔧 Easy Integration: Simple script tag or ES module import
• 📸 Screenshot Capture: Automatic screenshot generation for better context

Quick Start

🔒 Secure Integration (Recommended)

Basic Integration:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feedlytic.umd.js"></script>
<script>
  // SECURE: Only project ID exposed - no database credentials!
  window.Feedlytic.init({
    projectId: 'your-project-id' // Only this is required
  });
</script>

With Custom Options:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feedlytic.umd.js"></script>
<script>
  window.Feedlytic.init({
    projectId: 'your-project-id',
    color: '#your-brand-color',
    position: 'bottom-right',
    customTexts: {
      feedbackTitle: 'Send Feedback',
      submitButton: 'Send'
    }
  });
</script>

Via NPM

npm install feedlytic-widget

Configuration Options

const widget = new feedlyticWidget({
  // Required
  projectId: 'your-project-id',
  
  // Widget Appearance
  color: '#4f46e5',                    // Primary color
  position: 'bottom-right',            // bottom-right, bottom-left, top-right, top-left
  
  // Feature Toggles
  enableFeedback: true,                // Enable feedback button
  enableContextualFeedback: true,      // Enable contextual comments
  enableExitIntent: true,              // Enable exit-intent surveys
  
  // Exit Intent Settings
  exitIntentSensitivity: 2,            // 1-5, higher = more sensitive
  
  // Custom Text
  customTexts: {
    feedbackButton: 'Feedback',
    feedbackTitle: 'Send Feedback',
    feedbackPlaceholder: 'Tell us what you think...',
    submitButton: 'Send',
    cancelButton: 'Cancel',
    contextualModeButton: 'Click to Comment'
  }
});

Methods

// Initialize the widget
widget.init();

// Show feedback modal programmatically
widget.showFeedbackModal();

// Enable contextual comment mode
widget.enableContextualMode();

// Disable contextual comment mode
widget.disableContextualMode();

// Test database connection
widget.testConnection().then(isConnected => {
  console.log('Connection status:', isConnected);
});

// Destroy the widget
widget.destroy();

Events

// Listen to widget events
widget.on('feedback-submitted', (data) => {
  console.log('Feedback submitted:', data);
});

widget.on('widget-opened', (data) => {
  console.log('Widget opened:', data);
});

widget.on('widget-closed', () => {
  console.log('Widget closed');
});

widget.on('exit-survey-submitted', (data) => {
  console.log('Exit survey submitted:', data);
});

Browser Support

• ✅ Chrome 60+
• ✅ Firefox 60+
• ✅ Safari 12+
• ✅ Edge 79+

TypeScript Support

Full TypeScript definitions are included:

import { feedlyticWidget, feedlyticConfig } from 'feedlytic-widget';

const config: feedlyticConfig = {
  projectId: 'your-project-id',
};

const widget = new feedlyticWidget(config);

Alternative CDN Options

jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feedlytic.umd.js"></script>

unpkg:

<script src="https://unpkg.com/[email protected]/dist/feedlytic.umd.js"></script>

License

MIT © Pacify Labs

Support

• 🐛 Report Issues
• 📧 Email: [email protected]
• 🌐 Website: feedlytic.app