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. Keep it mounted across login and logout transitions.

The provider does not read your app's authentication state. The identity setup below controls identity-based targeting.

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

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(() => {async function identifyUser() {try {await identify(id, { email, plan });} catch (error) {console.error("Unable to identify user", error);}}void identifyUser();}, [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.

To make a flow eligible only after the app supplies user identity, turn on Require identity in the flow's Settings. This checks for supplied identity; it does not prove authentication. Use Identity verification when widget requests need signed proof.

In your app's authoritative logout handler, await reset() before another user can enter the same provider tree. reset() is asynchronous: it closes open flows, clears JWT authentication, and resets the current user identity. Other runtime configuration remains in place.

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