Install NPSpack on React
Add NPS feedback collection to your React application. Compatible with Create React App, hooks, and all React ecosystems.
React Integration
Add NPS tracking to your React app in minutes
1
Get Your Site ID
Integration Methods
2A
📄 HTML Template Method
Add to your public/index.html:
<script src="https://npspack.com/js/nps-widget.js"
data-site-id="your-site-id"
data-delay="5000"></script>
data-site-id="your-site-id"
data-delay="5000"></script>
2B
🔧 useEffect Hook
Load dynamically in your App component:
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://npspack.com/js/nps-widget.js';
script.setAttribute('data-site-id', 'your-site-id');
document.body.appendChild(script);
}, []);
}
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://npspack.com/js/nps-widget.js';
script.setAttribute('data-site-id', 'your-site-id');
document.body.appendChild(script);
}, []);
}
2C
⚙️ Environment Config
Add to .env:
REACT_APP_NPSPACK_SITE_ID=your-site-id
Perfect for React Applications
⚛️ React Compatible
- • Works with React 16.8+
- • Hooks integration
- • Create React App support
- • TypeScript ready
🚀 Easy Integration
- • Multiple installation methods
- • Environment configuration
- • Hot reload compatible
- • No React dependencies needed
Advanced Usage
🔧 Custom Hook
Create a custom hook for reusability:
import { useEffect } from 'react';
export function useNpsWidget(siteId) {
useEffect(() => {
if (!siteId) return;
const script = document.createElement('script');
script.src = 'https://npspack.com/js/nps-widget.js';
script.setAttribute('data-site-id', siteId);
document.body.appendChild(script);
}, [siteId]);
}
export function useNpsWidget(siteId) {
useEffect(() => {
if (!siteId) return;
const script = document.createElement('script');
script.src = 'https://npspack.com/js/nps-widget.js';
script.setAttribute('data-site-id', siteId);
document.body.appendChild(script);
}, [siteId]);
}
Add Feedback to Your React App
Join React developers who use NPSpack to collect user feedback effortlessly.
One-time payment • React 16.8+ compatible • TypeScript ready