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-widget

CDN 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