Notefully

In-app feedback for web apps: screenshot + numbered stickers, dictation, and optional short video.

Install

npm install @makefully/notefully

Embed

import Notefully from '@makefully/notefully';
import '@makefully/notefully/notefully.css';
import pkg from './package.json' with { type: 'json' };

Notefully.init({
  endpoint: 'https://make.makefullystudios.com/notefully', // or your self-hosted relay
  projectKey: 'nfk_…', // from Showfully → Notefully → Settings
  version: pkg.version,
  name: pkg.name, // optional report prefix; falls back to project default slug
  theme: 'maker', // maker | all-business | brighter-day | quiet-night
  video: false,   // default; set true to enable screen recording
  consoleLogLimit: 10, // most recent console lines attached to each report (0–80)
  // kinds default to bug / idea / other. Pass kinds to replace the full list:
  // kinds: ['bug', 'idea', { id: 'polish', label: 'Polish' }, 'other'],
  hideLauncher: true, // optional; drive open/submit from your own UI
  // After a successful submit, keep "Submitted!" + View Report link until dismiss:
  // displayLink: true, // default false; requires relay to return trackerUrl
  // Optional canvas-game hooks for the automatic (DOM) capture path:
  // onBeforeCapture: async () => { engine.render(); },
  // capture: async () => engine.screenshotCanvas(), // data URL | Blob | HTMLCanvasElement
});

// Update settings later without remounting (theme, hideLauncher, video, …):
Notefully.configure({ theme: 'quiet-night' });
Notefully.setTheme('all-business');
Notefully.setVisible(false); // hides launcher and closes an open dialog

Notefully.identify({
  userId: 'user_123',
  email: '[email protected]',
  displayName: 'Ada' // sets reporter; hides the Author field
});

Or via the IIFE build:

<link rel="stylesheet" href="node_modules/@makefully/notefully/dist/notefully.css">
<script src="node_modules/@makefully/notefully/dist/notefully.iife.js"></script>
<script>
  Notefully.init({
    endpoint: 'https://make.makefullystudios.com/notefully',
    projectKey: 'nfk_…',
    version: '1.4.2',
    name: 'my-app',
    hideLauncher: false
  });
</script>

Bundlers should prefer the package export import '@makefully/notefully/notefully.css' (see Embed above). The dist/ path is for static / IIFE hosts. With hideLauncher: true, call Notefully.open() / Notefully.submit() from your own UI.

Screenshots

On open, Notefully captures the page automatically: optional onBeforeCapture / capture hooks first, then a canvas-aware DOM rasterize sized to the viewport (so absolutely positioned apps still capture). Empty results are treated as no screenshot—markup tools stay hidden and the camera Recapture control sits beside the mic. With a shot, Discard and Recapture sit on the far right of the edit tools. Recapture hides the dialog and tries the browser share picker (getDisplayMedia); if that fails or is cancelled, it falls back to the automatic path.

Above Submit, kind tags and a short disclosure share a wrapping row when space allows. The disclosure explains that logs and/or diagnostic information will be sent; the list icon opens a review panel (diagnostics as whole fields/objects, plus console lines snapshotted at open). Redact toggles omit items from the report; the disclosure sentence updates when a whole section is redacted or when there are no logs. Section redact preferences and the last selected kind are remembered in localStorage for later reports.

Hosted relay

Makefully hosts a relay at https://make.makefullystudios.com/notefully. Pass that as endpoint (no trailing slash required). You still need a project key from your Showfully Notefully settings.

Project key vs name

• projectKey (nfk_…) chooses the Showfully inbox and delivery settings.
• name (optional on init, same idea as package.json name) is only a report folder prefix after sanitizing: {slug}-{version}-{nf_id}/. Values like @scope/pkg become scope-pkg. If omitted, the relay uses the project’s default slug from Showfully → Notefully → Settings.

Related apps can share one inbox/key and pass different name values. The Notefully inbox shows an app filter when more than one sanitized name/slug appears.

Identify

Call Notefully.identify() whenever the signed-in user is known (and again if they switch accounts):

| Field | Type | Notes | |-------|------|--------| | userId | string | Stable app user id. Alias: id. | | email | string | Contact email when available. | | displayName | string | Human-readable name. Aliases: username, name. |

Unknown keys are ignored and warned in the console. Identity is attached to each report’s context payload; it is not a substitute for projectKey. Prefer displayName (not name) on identify() so it does not collide with init({ name }) mentally — both still work.

When any identify field is set, the widget hides the Author input and uses that identity as the reporter (displayName, else email, else userId). Without identify(), the Author field stays visible (prefilled from localStorage) so guests can name themselves.

Report kinds

By default the dialog offers Bug, Idea, and Other. Pass kinds to replace that list entirely:

Notefully.init({
  // …
  kinds: ['bug', 'idea', { id: 'ux', label: 'UX' }, 'other']
});

Kind ids are lowercased slugs (polish, ux). Labels default to title case; use { id, label } for custom labels. The relay stores whatever kind the widget submits.

Secrets never go in the widget — only the public project key and relay URL.