npm package: @promind/pingpulse
Description: Collect user feedback one question at a time. PingPulse makes feedback collection simple with emoji-based ratings and AI-powered insights.
Author: chinaza
Latest version: 1.1.10

# 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

```bash
npm install @promind/pingpulse-widget
# or
yarn add @promind/pingpulse-widget
```

### CDN Script

Add the script tag to your HTML:

```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:

```tsx
import { PingPulseProvider } from '@promind/pingpulse-widget';

function App() {
  return (
    <PingPulseProvider apiKey="your_api_key" clientId="your_client_id">
      <YourApp />
    </PingPulseProvider>
  );
}
```

### CDN Integration

#### Auto-initialization

```html
<!-- 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

```html
<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

```tsx
<PingPulseProvider
  apiKey="your_api_key"
  clientId="your_client_id"
  autoCollect={true}
  minimumDelaySeconds={5}
>
  <YourApp />
</PingPulseProvider>
```

#### CDN

```html
<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

```tsx
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

```html
<button
  onclick="window.PingPulse.ping({
  userId: 'user123',
  sessionId: 'session456',
  meta: {
    page: 'checkout',
    action: 'purchase'
  }
})"
>
  Buy Now
</button>
```

## Configuration

```typescript
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](https://pingpulse.ai/app)