chinaza
PingPulse Widget
Collect user feedback one question at a time. PingPulse makes feedback collection simple with emoji-based ratings and AI-powered insights.
Features
- 🎯 Single question focus
- 😊 Emoji star ratings (angry, indifferent, satisfied)
- 🤖 AI-powered feedback analysis
- ⚡️ Lightweight widget
- 📱 Mobile-friendly design
- 🔌 Multiple integration options (React & CDN)
Installation
NPM Package
npm install @promind/pingpulse-widget
# or
yarn add @promind/pingpulse-widgetCDN Script
Add the script tag to your HTML:
<!-- Auto-initialization -->
<script src="https://unpkg.com/@promind/pingpulse?apikey=your_api_key&clientid=your_client_id"></script>
<!-- OR Manual initialization -->
<script src="https://unpkg.com/@promind/pingpulse"></script>Quick Start
React Integration
Wrap your app with PingPulseProvider:
import { PingPulseProvider } from '@promind/pingpulse-widget';
function App() {
return (
<PingPulseProvider apiKey="your_api_key" clientId="your_client_id">
<YourApp />
</PingPulseProvider>
);
}CDN Integration
Auto-initialization
<!-- The widget will initialize automatically with provided parameters -->
<script src="https://unpkg.com/@promind/pingpulse?apikey=your_api_key&clientid=your_client_id"></script>Manual initialization
<script src="https://unpkg.com/@promind/pingpulse"></script>
<script>
window.PingPulse.init({
apiKey: 'your_api_key',
clientId: 'your_client_id',
userId: null,
autoCollect: true,
meta: {},
minimumDelaySeconds: 0,
});
// Trigger feedback modal manually
window.PingPulse.ping({
userId: 'user123',
sessionId: 'session456',
meta: {
page: 'checkout',
action: 'purchase',
},
});
</script>Usage
Automatic Collection
React
<PingPulseProvider
apiKey="your_api_key"
clientId="your_client_id"
autoCollect={true}
minimumDelaySeconds={5}
>
<YourApp />
</PingPulseProvider>CDN
<script src="https://unpkg.com/@promind/pingpulse"></script>
<script>
window.PingPulse.init({
apiKey: 'your_api_key',
clientId: 'your_client_id',
autoCollect: true,
minimumDelaySeconds: 5,
});
</script>Manual Triggers
React
import { usePingPulse } from '@promind/pingpulse-widget';
function FeedbackButton() {
const ping = usePingPulse();
return (
<button
onClick={async () => {
await doSomething();
ping({
sessionId: 'session123',
userId: 'user123',
meta: {
page: 'checkout',
action: 'purchase',
},
});
}}
>
Buy Now
</button>
);
}CDN
<button
onclick="window.PingPulse.ping({
userId: 'user123',
sessionId: 'session456',
meta: {
page: 'checkout',
action: 'purchase'
}
})"
>
Buy Now
</button>Configuration
interface FeedbackConfig {
/** Your PingPulse API key */
apiKey: string;
/** Your PingPulse client ID */
clientId: string;
/** Track feedback by user ID */
userId?: string;
/** Show feedback modal automatically */
autoCollect?: boolean;
/** Additional context for AI analysis */
meta?: Record<string, any>;
/** Wait time before showing modal (seconds) */
minimumDelaySeconds?: number;
/** In test mode, the feedback collection modal will always open if there is an active session. */
testMode?: boolean;
}View Results
Access your feedback data and AI insights at pingpulse.ai/app