Requirements

The React integration requires React 18+ as a peer dependency. For non-React sites, the vanilla inject script (feedtack.inject.js) is available — drop it in with a <script> tag and call window.Feedtack.init(...) with no build step required.

Installation

npm install feedtack

Minimal setup

Wrap your app with FeedtackProvider and pass an adapter and user:

"use client";

import { FeedtackProvider } from "feedtack/react";
import { ConsoleAdapter } from "feedtack";

export default function App() {
  return (
    <FeedtackProvider
      adapter={new ConsoleAdapter()}
      currentUser={{ id: "u1", name: "Trillium", role: "admin" }}
    >
      <YourApp />
    </FeedtackProvider>
  );
}

Next.js App Router: FeedtackProvider uses React hooks internally, so any file that renders it must be a Client Component. Add "use client" at the top of the file.

This renders a floating "Feedback" button. Clicking it opens the feedback modal. The ConsoleAdapter logs payloads to console.log — perfect for development.

Try it out

1. Click the Feedback button — or press Shift+P (the default hotkey)
2. Choose Site, Page, or click Place a pin
3. In pin mode, click any element on the page
4. Write a comment, pick a sentiment, and submit
5. Check your browser console for the emitted JSON payload

Hotkey

The default hotkey to open the feedback modal is Shift+P. You can change it with the hotkey prop on FeedtackProvider:

<FeedtackProvider hotkey="shift+f" ...>

To disable the hotkey entirely, set hotkey={null} on FeedtackProvider.

Verify your setup

runFeedtackDoctor() is a read-only configuration check that tells you whether the pieces actually line up: React Fiber accessibility, adapter capabilities (core / content approval / inline editing), currentUser attribution fields, Web Crypto availability for content hashing, data-feedtack-field duplicates, and whether the provider is mounted.

Run it once in the browser after mount — temporarily in an effect, or straight from the devtools console:

import { runFeedtackDoctor } from 'feedtack'

useEffect(() => {
  if (process.env.NODE_ENV !== 'production') {
    runFeedtackDoctor({ adapter, currentUser })
  }
}, [])

It prints a grouped checklist to the console and returns a structured FeedtackDoctorReport ({ ok, checks }) if you'd rather assert on it — for example in a Playwright smoke test via page.evaluate(). Nothing is submitted and no adapter writes happen; it is safe to call anywhere, and it no-ops gracefully during SSR.

Next steps

• Swap ConsoleAdapter for a production adapter — see Adapters
• Understand feedback scopes — see Scopes
• See the full provider API — see FeedtackProvider