@magicowls/feedbakkr-react

React SDK for feedbakkr — contextual, in-page feedback pins for any live site. Visitors point at any element on the page and leave a comment; it's anchored to that exact element with a CSS selector plus coords as a fallback.

Install

pnpm add @magicowls/feedbakkr-react
# or: npm install @magicowls/feedbakkr-react
# or: yarn add @magicowls/feedbakkr-react

React 18 or 19 is expected as a peer dep.

Quick start

Grab a public key from the admin dashboard at admin.feedbakkr.io and wrap your app:

import { FeedbackProvider } from "@magicowls/feedbakkr-react";

export function Root() {
  return (
    <FeedbackProvider
      siteId="fbk_pk_your_public_key_here"
      apiBase="https://api.feedbakkr.io"
    >
      <App />
    </FeedbackProvider>
  );
}

A floating Give feedback button appears in the corner. Visitors click it, pick an element, leave a comment. First-timers verify via magic link; after that, feedback shows up in the admin dashboard pinned to the element they clicked.

Options

| Prop | Type | Description | | --------------- | ---------- | --------------------------------------------------------------------------- | | siteId | string | Public key from site settings (fbk_pk_...). Required. | | apiBase | string | API origin (usually https://api.feedbakkr.io). Required. | | launcherColor | string? | Hex override for the launcher button background. Overrides the site-level setting. |

Colour also configurable per-site from the admin dashboard — the prop is for when the same site is embedded in multiple themed apps.

Network behavior

feedbakkr is a thin client for a single, configurable backend. It talks only to the URL you pass as apiBase on the provider — there are no third-party calls, no analytics pingbacks, no telemetry.

| Method | Path | Purpose | | ------ | -------------------------------- | ---------------------------------------------------------------------- | | GET | /v1/public/config | Reads site SDK config (categories, launcher colour, verification rule) | | GET | /v1/public/feedback | Lists this reporter's own feedback for the current page | | POST | /v1/public/feedback | Submits a new pinned comment | | PATCH | /v1/public/feedback/:id | Edits an existing own-feedback item | | POST | /v1/public/sessions/resend | Re-issues the magic-link email when a reporter asks | | GET | /v1/admin-view/feedback | Called only when an admin opens the page via "View in context" |

Data sent: your siteId (public key), the reporter's name + email (once, on first submit), the comment text, and anchoring metadata (CSS selector + viewport coords + page URL/title). Admins' session tokens travel in the Authorization header when in admin-view mode.

Data never sent: third-party trackers, DOM screenshots, host-site cookies, or anything beyond the headers a normal fetch already carries.

Point apiBase at your own deployment to self-host — the SDK never calls feedbakkr.io unless you ask it to.

Security

See SECURITY.md for how to report vulnerabilities and what's in scope.

Sizing

~60 KB gzipped. Inline-styled so it doesn't fight your design system. One provider, one public key, done.

Bundle

ESM + CJS + TypeScript definitions. Side-effect free.

Docs

Full setup walkthrough, webhooks, and configuration at admin.feedbakkr.io/docs.

License

MIT