@nolby/react

The widget as a React component — one element, typed props, and a clean teardown on unmount.

If your product is React, install the package rather than writing the script tag yourself. It loads the same bundle from cdn.nolby.co at runtime, so a fix reaches you without a reinstall.

npm install @nolby/react

Draw a board

import { NolbyBoard } from "@nolby/react";

export function Feedback() {
  return <NolbyBoard org="yourworkspace" className="min-h-[600px]" />;
}

That draws the board where the component sits. org is your workspace slug — the one in your nolby address.

Props

Prop	Type	Default	What it does
`org`	`string`	—	Your workspace slug. Required.
`board`	`string`	first board	Which board, if you have more than one.
`view`	`"feed" \| "roadmap" \| "changelog"`	`"feed"`	Which surface to open on.
`placement`	`"inline" \| "launcher"`	`"inline"`	In place, or a button in the corner.
`className`	`string`	—	Applied to the element the inline board draws into.
`style`	`CSSProperties`	—	Same.
`nonce`	`string`	—	Your page's CSP nonce, if `script-src` names one.
`origin`	`string`	derived from `org`	Where the API lives. For development.
`scriptSrc`	`string`	the CDN copy	Which bundle to load. For development.

A launcher instead

<NolbyBoard org="yourworkspace" placement="launcher" />

A launcher mounts itself on <body> and renders nothing where the component sits, so className and style do not apply to it. One launcher per page.

To open it from your own button, use the hook:

import { NolbyBoard, useNolby } from "@nolby/react";

function Header() {
  const { open } = useNolby();
  return <button onClick={open}>Feedback</button>;
}

export function App() {
  return (
    <>
      <Header />
      <NolbyBoard org="yourworkspace" placement="launcher" />
    </>
  );
}

useNolby returns open and close, and works the launcher wherever it is mounted in the tree.

Unmounting

The component removes the widget when it unmounts and cancels anything still in flight, so nothing is left in the DOM and no request lands after the component has gone. Changing org, board, view or placement takes the old widget down before asking for the new one.

That matters in a router: a feedback page you navigate away from and back to does not accumulate widgets.

Theming

Theming is the same as the script tag — your page's --nolby-* custom properties reach inside the widget, and your workspace's own colour applies when your page sets nothing. See the widget.

Loading it yourself

The loader is exported if you need it outside React:

import { loadWidget, WIDGET_SRC } from "@nolby/react";

const handle = await loadWidget({ org: "yourworkspace", container: el });
handle.open();
handle.close();
handle.destroy();

open and close do nothing for an inline widget.

← All docs This didn’t answer it → email us