React SDK reference

The React SDK wraps the same runtime as the JavaScript SDK in a provider plus hooks. If you haven't set up yet, start with the React SDK guide.

GetUserFeedbackProvider

Initializes the widget client and makes it available to all hooks below it.

app.tsx

<GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><App /></GetUserFeedbackProvider>

clientOptions

Option	Type	Default	Description
`apiKey`	`string`	required	Your project API key.
`colorScheme`	`"light" \| "dark" \| "system" \| { autoDetectColorScheme: string[] }`	auto-detect	Color scheme. See Dark mode.
`defaultConsent`	`"granted" \| "pending" \| "denied" \| "revoked" \| GrantScope[]`	`"granted"`	Initial consent state. See Privacy & consent.
`disableAutoLoad`	`boolean`	`false`	When `true`, call `client.load()` manually before opening surveys.
`disableTelemetry`	`boolean`	`false`	Disables anonymous performance telemetry. Does not affect user analytics.
`flags`	`Record<string, AppEventFlagValue> \| AppEventFlag[]`	none	Your app's feature flag evaluations. Used by rolling theme updates.

useGetUserFeedback()

Returns the client instance with the same core methods as the JavaScript SDK.

identify(userId, traits?, options?) — associate a user ID, traits, and optional external IDs with the current user
identify(traits, options?) — associate traits with the current user
identify(traits, undefined, options?) — three-argument form for call sites that keep options separate
reset() — clear identity and auth state on logout
configure({ colorScheme?, consent?, auth? }) — update settings at runtime
track(eventName, properties?, options?) — track a product event with optional external IDs
load() — manually start the widget when disableAutoLoad is true
close() — close any open flow

Events

We recommend sending product events server-side through an integration such as Segment. If client-side tracking fits your app better, track(eventName, properties?, options?) records an event from the browser.

const client = useGetUserFeedback();client.track("Checkout Started", {plan: "pro",source: "billing_page",});

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 reference.

Use options.externalIds when an identify or track call carries an identifier from another system, such as a Shopify customer ID. External IDs help match profiles, but they are not traits by themselves. Do not put Segment-shaped externalIds in traits or event properties.

await client.identify("user_123", { email: "jane@example.com" }, {externalIds: [{id: "gid://shopify/Customer/123",type: "shopify_customer_id",collection: "users",encoding: "none",},],});client.track("Checkout Started", { plan: "pro" }, {externalIds: [{id: "gid://shopify/Customer/123",type: "shopify_customer_id",collection: "users",encoding: "none",},],});

useFlow(options)

The main hook for working with a specific survey or flow.

feedback-button.tsx

const { open, prerender, isLoading } = useFlow({flowId: "YOUR_FLOW_ID",});

Options

Option	Type	Default	Description
`flowId`	`string`	required	The flow or survey ID to target.
`prefetchOnMount`	`boolean`	`false`	Prefetch flow resources when the component mounts.
`hideCloseButton`	`boolean`	`false`	Hide the default close button.
`container`	`"default" \| "custom"`	`"default"`	Use `"custom"` to render inside your own element. See Containers.

Return value

open(options?) — open the flow (options include metadata)
prefetch() — load flow resources over the network
prerender() — warm up the UI before opening
close() — close the flow
setOpen(boolean) — declarative open/close
isLoading — true after open() is requested while the flow is not visible yet
shouldRenderContainer — true when using container: "custom" and the container should be in the DOM
containerRef — ref to attach to your container element
width / height — recommended dimensions for custom containers

These methods return promises, but both fire-and-forget and await are valid. See JavaScript SDK reference for the execution model.

Example:

feedback-button.tsx

const { open } = useFlow({ flowId: "YOUR_FLOW_ID" });await open({metadata: {tags: {journey_stage: "onboarding",task_type: "report-export",},},});

For metadata examples and supported value shapes, see Response metadata.

useDefaultFlowContainer()

Returns the default container ref and dimensions. Useful when you want to customize the container wrapper but keep the default sizing behavior.