@pollenate/react

React component for the Pollenate feedback widget.

Installation

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

Quick Start

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

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

Custom Themed Example

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

License

MIT