Developer Docs / Web React SDK / Feedback

Web React Feedback SDK

Initialize GrowthCat, configure feedback identity and theme, submit feedback programmatically, render the built-in board, or build your own board UI.

Create GrowthCat Account Web React overview Developer docs

Use case

Collect ideas, bugs, feedback, and questions from web users.

Exports

GrowthCatFeedbackBoard, useFeedbackBoard, and feedback client APIs.

Init order

Initialize GrowthCat, then call configureFeedback with user, theme, strings, and metadata.

1. Overview

Feedback uses the shared GrowthCat client plus feedback-specific configuration. You can start anonymous, identify users after sign-in, submit feedback directly, or render a board component.

2. Install

bash

npm install @growthcat/web react react-dom
# or
yarn add @growthcat/web react react-dom

Install the GrowthCat integration skill

The WebSDK repository includes an agent skill that inspects your app, checks the installed SDK types, and adds referrals, attribution, ads, sponsorships, or feedback using your existing architecture.

bash

npx skills add . --skill growthcat-web-integration

Run this from a local GrowthCatSDK-Web checkout. For a remote install, replace the dot with the repository Git URL. Then tell your coding agent which capability and placement you want.

Use $growthcat-web-integration to add a feedback board to my settings page.

3. Initialize GrowthCat

Call GrowthCat.initialize() once before configuring feedback.

import { GrowthCat } from "@growthcat/web";

GrowthCat.initialize({
  apiKey: process.env.NEXT_PUBLIC_GROWTHCAT_KEY!,
  workspace: "live",
  logsEnabled: process.env.NODE_ENV !== "production",
  measurementMode: "essential",
});

4. Initialize Feedback

Call configureFeedback after GrowthCat is initialized. This is where feedback identity, theme, strings, and default metadata are configured.

GrowthCat.shared.configureFeedback({
  user: { id: "user_123", email: "jane@example.com", name: "Jane" },
  theme: { accentColor: "#0A84FF" },
  strings: { title: "Share your thoughts" },
});

Omit user to start anonymous. The SDK creates and persists an anonymous ID for you.

5. Identify Users

Identify the feedback user after sign-in and clear the user on sign-out.

GrowthCat.shared.identifyFeedbackUser({
  id: "user_123",
  email: "jane@example.com",
  name: "Jane",
});

GrowthCat.shared.clearFeedbackUser();

6. Theme

The built-in board follows the user's system color scheme by default. You can force a mode or customize dark colors.

GrowthCat.shared.configureFeedback({
  theme: {
    mode: "system", // "light" | "dark" | "system"
    accentColor: "#0A84FF",
    buttonTextColor: "#FFFFFF",
    overlayColor: "rgba(0,0,0,0.4)",
    inputBackgroundColor: "#FFFFFF",
    selectedControlBackgroundColor: "rgba(10,132,255,0.1)",
    dark: {
      backgroundColor: "#111113",
      cardColor: "#1C1C1E",
      primaryTextColor: "#F5F5F7",
      secondaryTextColor: "#A1A1AA",
      borderColor: "#2C2C2E",
      overlayColor: "rgba(0,0,0,0.55)",
      inputBackgroundColor: "#111113",
      selectedControlBackgroundColor: "rgba(10,132,255,0.18)",
    },
  },
});

7. Submit Feedback

const result = await GrowthCat.shared.submitFeedback({
  type: "bug",
  title: "Export button crashes",
  body: "When I tap Export from the reports screen the app freezes.",
  metadata: { screen: "reports" },
});

console.log(result.itemId);

Keep metadata minimal

Do not include sensitive or unnecessary personal data in feedback metadata. Use small product-context fields such as a screen name, app version, or feature identifier.

8. Built-in Feedback Board

tsx

import { GrowthCatFeedbackBoard } from "@growthcat/web/react";

export function FeedbackPage() {
  return (
    <GrowthCatFeedbackBoard
      defaultType="idea"
      style={{ minHeight: "100vh" }}
    />
  );
}

9. Custom Board

tsx

import { useFeedbackBoard } from "@growthcat/web/react";

export function MyBoard() {
  const { items, isLoading, vote, unvote } = useFeedbackBoard({ autoLoad: true });

  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.itemId}>
          <button onClick={() => vote(item.itemId)}>Vote {item.voteCount}</button>
          <button onClick={() => unvote(item.itemId)}>Remove vote</button>
          <strong>{item.title}</strong>
        </li>
      ))}
    </ul>
  );
}

10. API Reference

client.configureFeedback(options)
client.identifyFeedbackUser(user)
client.clearFeedbackUser()
client.setFeedbackMetadata(metadata)
client.submitFeedback(submission)
client.fetchFeedbackBoard(type)
client.voteFeedbackItem(itemId)
client.unvoteFeedbackItem(itemId)
client.feedbackAnonymousId