getuserfeedback.
Docs

React SDK

Add the provider, identify your users, and you're live.

Last reviewed

React SDK

The React SDK gives you a provider and hooks to add getuserfeedback.com to your React app.

Install & setup

1. Install

npm install @getuserfeedback/react

Requires react >= 18.

2. Add the provider

Wrap your app with GetUserFeedbackProvider. This creates the widget client and makes it available to all hooks below it.

Where you place the provider matters:

  • Wrap your entire app if you want to reach all users — including visitors who haven't signed in, pre-login pages, and public-facing surfaces.
  • Wrap just below your auth provider if you only want to target authenticated users.

Whole app (everyone, including visitors who haven't signed in)

TypeScriptapp.tsx
import { GetUserFeedbackProvider } from "@getuserfeedback/react";export function App() {return (<GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><AppRoutes /></GetUserFeedbackProvider>);}

After auth (authenticated users only)

import { GetUserFeedbackProvider } from "@getuserfeedback/react";import { AuthProvider } from "./auth";export function App() {return (<AuthProvider><GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><AuthenticatedRoutes /></GetUserFeedbackProvider></AuthProvider>);}

The only required option is apiKey — find it in Widget settings.

You're live

That's it. The widget is running. Published flows — surveys, forms, and in-app messages — will show up when their delivery and targeting rules match.

3. Identify your users

If your app has logged-in users, identifying them enables targeting, personalization, and behavioral segmentation.

Render this after your app has an authenticated user object.

TypeScriptidentify-user.tsx
import { useEffect } from "react";import { useGetUserFeedback } from "@getuserfeedback/react";function IdentifyUser({user,}: {user: { id: string; email: string; plan: string };}) {const { identify } = useGetUserFeedback();const { email, id, plan } = user;useEffect(() => {identify(id, { email, plan });}, [email, id, identify, plan]);return null;}

This step is optional — flows work fine without it. But with user identity, you can target by plan, role, or behavior, and responses are tied to real people. See Personalization for the full picture.

Call reset() on logout so the previous user's identity doesn't carry over.

Track product events

We recommend sending product events server-side through an integration such as Segment. If client-side tracking fits your app better, use track().

You can call track() before or after login. When the same person is later identified, Identity resolution merges their events into a single profile. See Events for SDK examples, event naming, and property guidance.

Dark mode

The widget automatically matches your app's color scheme, and you can override it when needed. See Dark mode for detection behavior and SDK examples.

Privacy & consent

By default, the widget starts with granted consent. Consent-first apps can start with pending and update consent from their existing cookie banner or consent manager.

Consent settings do not block response collection or flows opened from code. They can prevent automatic targeting when its rules need measurement or storage. See Compliance & consent for scope behavior and SDK examples.

Going further