Add a feedback board to a SaaS starter kit

Before you start

Sign up free at getusernote.com, create a board, and copy your board ID from the board’s Install tab (it starts with ws_). Replace ws_YOUR_BOARD_ID in the snippets below with it.

In every starter: install the package

npm install usernote

The component is marked “use client”, so it works in Next.js Server Component layouts as it is. None of these starters sets a Content Security Policy; if you add one later, allow https://getusernote.com in script-src and connect-src.

Next.js SaaS Starter (nextjs/saas-starter)

Vercel’s official starter (about 16,000 stars). Add the Feedback button in app/layout.tsx, after {children} inside <body>:

import { UserNote } from 'usernote/react';

// in app/layout.tsx, inside <body>, after {children}
<UserNote board="ws_YOUR_BOARD_ID" />

Put the roadmap next to the pricing page, in app/(dashboard)/roadmap/page.tsx, so it gets the site header from app/(dashboard)/layout.tsx. Only /dashboard needs a login (middleware.ts), so /roadmap stays public:

import { UserNote } from 'usernote/react';

export default function RoadmapPage() {
  return (
    <main className="max-w-4xl mx-auto px-4 py-12">
      <UserNote board="ws_YOUR_BOARD_ID" inline view="roadmap" />
    </main>
  );
}

Open SaaS (Wasp)

A free, full-featured starter built on Wasp, React and Node.js (about 16,000 stars). Wasp wraps every page in src/client/App.tsx, so the Feedback button goes there, once, next to the <Toaster>:

import { UserNote } from 'usernote/react';

// in App() in src/client/App.tsx, next to <Toaster position="bottom-right" />
<UserNote board="ws_YOUR_BOARD_ID" position="left" />

position="left" keeps the button clear of the toasts, which also appear bottom-right. For the roadmap, create src/roadmap/RoadmapPage.tsx:

import { UserNote } from 'usernote/react';

export default function RoadmapPage() {
  return (
    <div className="mx-auto max-w-4xl px-6 py-12">
      <UserNote board="ws_YOUR_BOARD_ID" inline view="roadmap" />
    </div>
  );
}

Then add its route to main.wasp.ts, next to LandingPageRoute:

import { RoadmapPage } from "./src/roadmap/RoadmapPage" with { type: "ref" };

route("RoadmapRoute", "/roadmap", page(RoadmapPage)),

Two things to change in App.tsx and the nav, or the page shows the demo app’s menu: add location.pathname === routes.RoadmapRoute.to to isMarketingPage, and add { name: "Roadmap", to: routes.RoadmapRoute.to } to marketingNavigationItems in src/client/components/NavBar/constants.ts.

ixartz Next.js Boilerplate and SaaS Boilerplate

Two popular free starters by the same author (about 13,000 and 7,500 stars), both with next-intl, so every page sits under src/app/[locale]. Add the Feedback button in src/app/[locale]/layout.tsx, after {props.children} inside <body>:

import { UserNote } from 'usernote/react';

// in src/app/[locale]/layout.tsx, inside <body>, after {props.children}
<UserNote board="ws_YOUR_BOARD_ID" />

In the Next.js Boilerplate, put the roadmap with the marketing pages, in src/app/[locale]/(marketing)/roadmap/page.tsx, and add a link to it in (marketing)/layout.tsx. Only the dashboard routes need a login (src/proxy.ts), so /roadmap stays public:

import { UserNote } from 'usernote/react';

export default function RoadmapPage() {
  return <UserNote board="ws_YOUR_BOARD_ID" inline view="roadmap" />;
}

The SaaS Boilerplate has the same (marketing) folder but no layout file in it: put the page in src/app/[locale]/(marketing)/roadmap/page.tsx and link to it from the landing page’s navigation. Its dashboard and onboarding routes need a login; /roadmap doesn’t.

T3 (create-t3-app)

The most-starred TypeScript starter (about 29,000 stars) generates a plain Next.js app, with everything under src/. With the App Router, add <UserNote board="ws_YOUR_BOARD_ID" /> inside <body> in src/app/layout.tsx and create src/app/roadmap/page.tsx as in the Next.js guide; with the Pages Router, add it to src/pages/_app.tsx.

• Next.js guide →

Paid starters (ShipFast, Makerkit, supastarter and others)

Their code isn’t public, so we haven’t checked where things go. Most are Next.js apps: the component goes in the root layout and the roadmap gets a page of its own, as in the Next.js guide. If yours uses another framework, the script tag works anywhere.

• Next.js guide →
• Install guide →

Using an AI coding tool?

Paste the prompt from your board’s Install tab into Cursor, Claude Code or similar, inside your starter’s folder. It names the files to change for React and Next.js apps, and tells the tool to install UserNote rather than build its own board.

• Cursor and Claude Code guide →

Next steps

• Settings → Allowed websites: add your domain so nobody can embed your board elsewhere.
• Settings → Accent color: match the button to your brand.
• Turn on Require approval if you want to check ideas before they appear.

• Full install guide and options →