Docs
Install

React

One component, or one hook.

Packages are on their way to npm

Until @usejot/react is published, the script tag in your index.html does the same job today.

npm install @usejot/react
src/main.tsx
import { JotWidget } from "@usejot/react";

<App />
<JotWidget projectKey="jot_pk_your_key" />

JotWidget renders nothing. It loads the same script the plain tag does, and removes the widget when it unmounts. StrictMode's double mount is safe — a second mount is ignored.

Prefer a hook? useJot(config) does the same from inside any component.

Options

Every script option is a prop: trigger, edge, offset, environment, autostart.

<JotWidget projectKey="jot_pk_your_key" environment="staging" edge="left" />

Only on some deploys

Most teams want Jot on staging and preview deploys, not in front of every customer. Render it behind whatever flag you already use:

function Feedback({ show }: { show: boolean }) {
  return show ? <JotWidget projectKey="jot_pk_your_key" /> : null;
}

If your cookie banner must run first, hold the widget back and start it once consent is granted:

<JotWidget projectKey="jot_pk_your_key" autostart={false} />;

// later, when your consent tool says yes:
window.Jot?.init();