npm package: @pollenate/react
Description: React component for the Pollenate feedback widget
Latest version: 0.2.0

# @pollenate/react

React component for the [Pollenate](https://pollenate.dev) feedback widget.

## Installation

```bash
npm install @pollenate/react
# or
pnpm add @pollenate/react
# or
yarn add @pollenate/react
```

## Quick Start

```tsx
import { PollenateWidget } from '@pollenate/react';

export function App() {
  return (
    <PollenateWidget
      inboxKey="YOUR_INBOX_KEY"
      apiKey="YOUR_API_KEY"
      type="stars"
      theme="auto"
      onSubmit={(event) => {
        console.log('Feedback submitted:', event.detail);
      }}
    />
  );
}
```

## Props

### Required

| Prop | Type | Description |
| --- | --- | --- |
| `inboxKey` | `string` | Your inbox key (from the Inboxes page) |
| `apiKey` | `string` | Your API key (must have `collect` scope) |

### Widget Behaviour

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'emoji' \| 'stars' \| 'thumbs' \| 'nps' \| 'csat' \| 'text'` | `'emoji'` | Widget type |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Floating button position |
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
| `prompt` | `string` | — | Custom prompt text |
| `context` | `Record<string, unknown>` | — | Metadata sent with each submission |
| `inline` | `boolean` | `false` | Render inline instead of floating |
| `container` | `string` | — | CSS selector to mount into (implies inline) |
| `trackImpressions` | `boolean` | `true` | Track page-view impressions |
| `stripQueryParams` | `boolean` | `false` | Strip query params from tracked URLs |
| `debug` | `boolean` | `false` | Enable console logging |

### Theming

| Prop | Type | Description |
| --- | --- | --- |
| `primaryColor` | `string` | Primary / accent color (hex) |
| `bgColor` | `string` | Background color (hex) |
| `textColor` | `string` | Text color (hex) |
| `borderColor` | `string` | Border color (hex) |
| `buttonTextColor` | `string` | Button text color (hex) |
| `borderRadius` | `number` | Border radius in px |
| `fontFamily` | `string` | Font family |
| `triggerColor` | `string` | Trigger button background color |
| `triggerSize` | `number` | Trigger button size in px (default 56) |
| `triggerLabel` | `string` | Trigger button text / emoji |
| `width` | `number` | Widget panel width in px (default 320) |
| `buttonText` | `string` | Submit button label |
| `successMessage` | `string` | Post-submit message |
| `commentPlaceholder` | `string` | Comment textarea placeholder |
| `hideBranding` | `boolean` | Hide "Powered by Pollenate" |
| `animation` | `'slide' \| 'fade' \| 'none'` | Animation style |

### Dark-Mode Overrides

| Prop | Type | Description |
| --- | --- | --- |
| `darkPrimaryColor` | `string` | Primary color for dark theme |
| `darkBgColor` | `string` | Background color for dark theme |
| `darkTextColor` | `string` | Text color for dark theme |
| `darkBorderColor` | `string` | Border color for dark theme |
| `darkButtonTextColor` | `string` | Button text color for dark theme |

### Callbacks

| Prop | Type | Description |
| --- | --- | --- |
| `onSubmit` | `(event: PollenateSubmitEvent) => void` | Called when feedback is submitted |
| `onImpression` | `(event: PollenateImpressionEvent) => void` | Called on widget impression |

## Inline Example

```tsx
<PollenateWidget
  inboxKey="my-inbox"
  apiKey="pk_live_xxx"
  type="thumbs"
  inline
  prompt="Was this page helpful?"
/>
```

## Custom Themed Example

```tsx
<PollenateWidget
  inboxKey="my-inbox"
  apiKey="pk_live_xxx"
  type="nps"
  theme="auto"
  primaryColor="#6366f1"
  borderRadius={12}
  buttonText="Submit Score"
  hideBranding
/>
```

## License

MIT