Opening surveys from code

Most surveys trigger automatically based on targeting rules you set in the getuserfeedback.com dashboard — no code needed. But sometimes you want to open a specific survey from a button, menu item, or code path.

You'll need the flow ID for the survey you want to open. Find it in the getuserfeedback.com dashboard under your survey's settings.

React SDK

import { useFlow } from "@getuserfeedback/react";

function FeedbackButton() {
  const { open } = useFlow({ flowId: "YOUR_FLOW_ID" });

  return (
    <button type="button" onClick={() => open()}>
      Give feedback
    </button>
  );
}

Use useFlow inside any component under GetUserFeedbackProvider.

JavaScript SDK

await client.flow("YOUR_FLOW_ID").open();

Use the same flow handle for prefetch(), prerender(), open(), and close() when you want to keep one flow lifecycle together.

Google Tag Manager / loader

window.__getuserfeedback?.flow("YOUR_FLOW_ID").open();

Make opening feel instant

If you know a survey is likely to open — for example, from a help menu item — you can prefetch and prerender it ahead of time:

React SDK

import { useFlow } from "@getuserfeedback/react";

function HelpMenuFeedbackItem() {
  const { prerender, open } = useFlow({
    flowId: "YOUR_FLOW_ID",
    prefetchOnMount: true,
  });

  return (
    <button
      type="button"
      onMouseEnter={() => prerender()}
      onFocus={() => prerender()}
      onClick={() => open()}
    >
      Share feedback
    </button>
  );
}

JavaScript SDK

const flow = client.flow("YOUR_FLOW_ID");

await flow.prefetch();
await flow.prerender();
await flow.open();

Prefetching loads flow resources over the network. Prerendering warms up the UI. Together they make opening feel instant.

Common mistake

Don't call open() before the widget is initialized. If you set disableAutoLoad: true, make sure client.load() has run first.