NPS (Net Promoter Score)

The NPS component is a feedback collection tool that helps you measure customer loyalty and satisfaction through the Net Promoter Score methodology. It presents users with a simple 1-10 scale to rate their likelihood of recommending your service.

Features

• Simple 1-10 rating scale
• Follow-up questions based on score
• Optional email collection
• Customizable appearance
• Multiple display positions
• Responsive design
• Remote configuration support

Installation

import { NPS } from './path-to/nps';

Basic Usage

// Initialize with default settings
const nps = new NPS({
  tracker: yourTrackerInstance,
  question: '¿Qué tan probable es que recomiendes este servicio?',
  themeColor: '#2563eb',
  position: 'bottom-center',
  autoShow: false,
  delay: 2000,
  mode: 'manual'
});

// Show the widget manually
nps.open();

Configuration Options

Option	Type	Default	Description
tracker	SystemTracker	Required	The tracker instance for analytics
question	string	'¿Qué tan probable es que recomiendes este servicio?'	The main NPS question
themeColor	string	'#2563eb'	Primary color for the widget
position	string	'bottom-center'	Position of the widget on screen
autoShow	boolean	false	Whether to show the widget automatically
delay	number	2000	Delay in ms before auto-showing the widget
mode	`'manual'	'remote'`	'manual'

Available Positions

• bottom-right (default)
• bottom-left
• bottom-center
• top-right
• top-left

Methods

open()

Manually opens the NPS widget.

nps.open();

close()

Manually closes the NPS widget.

nps.close();

Data Collection

When a user submits their NPS score, the following data is collected:

• NPS score (1-10)
• Optional feedback message
• Optional email address
• Current URL
• User agent
• Timestamp
• Business ID

Styling

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

• .nps-card - Main container
• .nps-close - Close button
• .nps-question - Question text
• .nps-options - Container for score buttons
• .nps-btn - Individual score button (1-10)
• .nps-input - Email input field
• .nps-text - Feedback textarea
• .nps-submit - Submit button
• .nps-footer - Footer text

NPS Calculation

The Net Promoter Score is calculated as:

NPS = % of Promoters (9-10) - % of Detractors (0-6)

• Promoters (9-10): Loyal enthusiasts who will keep buying and refer others
• Passives (7-8): Satisfied but unenthusiastic customers who are vulnerable to competitive offerings
• Detractors (0-6): Unhappy customers who can damage your brand through negative word-of-mouth

Best Practices

1. Timing: Show the NPS survey after a user has had time to experience your product
2. Frequency: Don't survey the same user too frequently (recommended: every 3-6 months)
3. Follow-up: Consider implementing follow-up actions based on the score
4. Customization: Tailor the follow-up questions based on the user's score
5. Actionable Insights: Use the feedback to make meaningful improvements to your product

Browser Support

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

Error Handling

The component includes error handling for:

• Network issues during submission
• Invalid configurations
• Duplicate submissions

Security

• All data is transmitted over HTTPS
• Email addresses are optional and only collected with user consent
• No sensitive personal data is collected