Add a feedback board to a v0 app
Give the app you’re building in v0 a Feedback button, feature voting and a public roadmap by pasting one prompt. v0 builds with Next.js, so the usernote npm package does the work.
Before you start
Sign up free at getusernote.com and create a board. Your board’s Install tab has this prompt with your board ID already filled in, so copy it from there. Or copy it below and replace ws_YOUR_BOARD_ID (it starts with ws_).
Paste this prompt
Open your chat in v0 and paste this prompt. For a Next.js app it adds the UserNote component to your root layout and a roadmap page.
Add the UserNote feedback widget to this site, so visitors can suggest features, vote on them and see our public roadmap. UserNote is a hosted service: don't build any feedback storage, voting or admin screens yourself. My UserNote board ID is ws_YOUR_BOARD_ID. 1. Add a floating Feedback button to every page. Put this script tag once in the shared layout, just before </body>: <script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" defer></script> In a React or Next.js app with package.json, use the npm package instead: npm install usernote, then render <UserNote board="ws_YOUR_BOARD_ID" /> (import { UserNote } from 'usernote/react') once in the root layout. In Vue or Svelte, call mount({ board: 'ws_YOUR_BOARD_ID' }) (import { mount } from 'usernote') once when the app starts. 2. Add a /roadmap page that shows the public roadmap, and link to it from the main navigation or footer. With the script tag: <div id="roadmap"></div> followed by <script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" data-mode="inline" data-target="#roadmap" data-view="roadmap" defer></script>. With the npm package: <UserNote board="ws_YOUR_BOARD_ID" inline view="roadmap" /> in React, or mount({ board: 'ws_YOUR_BOARD_ID', target: element, view: 'roadmap' }) in Vue or Svelte. In a single-page app (React, Vue, Svelte), use the npm package for this page: a script tag rendered by a component doesn't run. 3. If the site sets a Content Security Policy, allow https://getusernote.com in script-src and connect-src. Docs: https://getusernote.com/llms.txt
Check it worked
In v0’s preview, check that:
- a Feedback button appears in the bottom-right corner of every page, and clicking it opens your board;
- your /roadmap page shows Planned, In progress and Completed columns (empty until you set statuses in your dashboard);
- you can suggest a test idea and vote on it, and it shows up in your UserNote dashboard.
If nothing shows, ask the assistant to check that the script tag (or the UserNote component) is in the layout every page uses, and that your board ID is correct.
Publish and lock it to your domain
Deploy to Vercel from v0 as usual.
Once it’s live, add your published domain under Settings → Allowed websites in your UserNote dashboard, so nobody can embed your board elsewhere. While the list is empty, the board works anywhere, which is easiest while you’re building; previews on other addresses stop showing it once you fill it in.
Why not let the AI build the board itself?
It can build a basic list of requests. What it usually leaves out are the parts that take the time: stopping duplicate votes and spam without making people sign up, approving and editing ideas, a public roadmap, email notifications, and keeping it all working. UserNote handles those, and the prompt tells the assistant not to build its own.
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.