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

3. Initialize GrowthCat

Call GrowthCat.initialize() once before configuring feedback.

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

GrowthCat.initialize({
  apiKey: "gc_live_your_key_here",
  logsEnabled: process.env.NODE_ENV !== "production",
});

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);

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