Install
Next.js
App Router and Pages Router.
Packages are on their way to npm
Until @usejot/next is published, use next/script as shown below.
npm install @usejot/nextimport { JotWidget } from "@usejot/next";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<JotWidget projectKey="jot_pk_your_key" />
</body>
</html>
);
}JotWidget is a client component, so it is safe in a server layout. For the
Pages Router, put the same component in pages/_app.tsx.
Every script option is a prop: trigger,
edge, offset, environment, autostart.
Without the package
next/script with lazyOnload fetches the loader after everything of yours
has loaded — the right trade for a feedback widget.
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.jsdelivr.net/npm/@usejot/widget@1/dist/jot.js"
data-jot-key="jot_pk_your_key"
strategy="lazyOnload"
/>
</body>
</html>
);
}Only on some deploys
Most teams want Jot on staging and preview deploys, not production. Render it behind whatever flag you already use, and tag reports with the environment so they never mix:
function Feedback({ show }: { show: boolean }) {
return show ? <JotWidget projectKey="jot_pk_your_key" environment="preview" /> : null;
}