@magicowls/feedbakkr-js

Framework-free JS embed for feedbakkr — contextual, in-page feedback pins for any live site. One <script> tag, zero dependencies, works alongside any framework or none at all.

React app? Use @magicowls/feedbakkr-react instead.

Install

The drop-in <script> is the simplest path — pulls a single, minified IIFE (~24 KB) straight from unpkg:

<script
  src="https://unpkg.com/@magicowls/feedbakkr-js"
  data-site-id="fbk_pk_your_public_key_here"
  data-api-base="https://api.feedbakkr.io"
  defer
></script>

Auto-inits when the script executes. A floating "Give feedback" button appears bottom-right; visitors click it, pick any element on the page, leave a comment. Their feedback shows up pinned to that exact element in your feedbakkr admin dashboard.

From npm (for bundler users)

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

import { init } from "@magicowls/feedbakkr-js";

init({
  siteId: "fbk_pk_your_public_key_here",
  apiBase: "https://api.feedbakkr.io",
});

Options

| Attribute / prop | Description | | -------------------- | --------------------------------------------------------------------------------------- | | data-site-id | Public key from site settings (fbk_pk_…). Required. | | data-api-base | API origin (usually https://api.feedbakkr.io). Required. | | data-launcher-color| Optional hex override for the launcher button background. |

Via init(options): siteId, apiBase, launcherColor (camelCase).

What reporters get

• Click-to-pick overlay — they hover to highlight any element, click to pin
• Comment form — category + comment + name/email (first time; subsequent submissions on the same site re-use the stored session)
• Email-verified sessions via magic link (the email link never blocks the submission itself)
• Their own pins render on every page load with the same custom tooltip

What admins get

From the admin dashboard's "Open in context" button, the SDK switches into read-only overlay mode with:

• Fixed top banner explaining the mode
• Every feedback item on the page rendered as a numbered pin, coloured by status (blue/amber/grey), with scaled-coord fallback + dashed outline when an element's selector no longer resolves
• Click any pin → read-only detail modal
• Live refresh every 30 s while the tab is visible (pauses when hidden)

Network behavior

The SDK talks only to the URL you pass as apiBase. No third-party calls, no analytics pingbacks, no telemetry.

Endpoints it hits:

| Method | Path | When | | ------ | -------------------------------- | --------------------------------------- | | GET | /v1/public/config | Once on load, reads site SDK config | | GET | /v1/public/feedback | Lists this reporter's own pins | | POST | /v1/public/feedback | New pinned comment | | PATCH | /v1/public/feedback/:id | Edit an existing own comment | | GET | /v1/admin-view/feedback | Only in admin "Open in context" mode |

Along with the comment payload the SDK sends a small client environment blob (browser / OS / deviceType / viewport) so admins can triage reports by device without asking the reporter what they were using.

Security

See SECURITY.md for vulnerability reporting.

Docs

Full setup walkthrough, webhooks, and config: admin.feedbakkr.io/docs.

License

MIT. Copyright (c) Alexander Miller trading as MagicOwls.