Install guide
Add a feedback board and public roadmap to any website with one script tag. It works with strict Content Security Policies, without allowing inline styles. This guide covers the embed options, settings, framework notes and security policies.
Quick start
- Sign up free and create a board.
- Open the board’s Install tab and copy your board ID (it starts with ws_).
- Paste this before </body> on every page where you want the Feedback button:
<script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" defer></script>That’s it. A Feedback button appears in the bottom corner; clicking it opens a slide-out board where visitors can suggest ideas and vote, without logging in. The Install tab in your dashboard shows every snippet below with your real board ID filled in.
Embed options
Use your own button
Hide the floating button and open the board from any element, such as a link in your app’s menu.
<script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" data-launcher="false" defer></script>
<button onclick="UserNote.open()">Give feedback</button>Embed inline
Render the board inside a page instead of a slide-out panel, e.g. on a /feedback page.
<div id="feedback"></div>
<script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" data-mode="inline" data-target="#feedback" defer></script>Public roadmap
Open on the Roadmap view: Planned, In progress and Completed as columns. Visitors can still switch to the Ideas list.
<div id="roadmap"></div>
<script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" data-mode="inline" data-target="#roadmap" data-view="roadmap" defer></script>Hosted board page
No code at all: every board has a public page you can link to from emails, docs or your app. Add ?view=roadmap to open on the roadmap.
https://getusernote.com/b/ws_YOUR_BOARD_ID
https://getusernote.com/b/ws_YOUR_BOARD_ID?view=roadmapIframe
Where a site builder takes an embed but not a script (an “embed” or “web page” block), show the hosted board in an iframe. Give it a fixed height; the board scrolls inside it. Use the script tag where you can: it fits its content and opens no extra page.
<iframe src="https://getusernote.com/b/ws_YOUR_BOARD_ID" title="Feedback board" style="width:100%;height:640px;border:0"></iframe>Allowed websites apply to the site showing the iframe. If you’ve set them and the board says it isn’t enabled for this website, add the address of the site or app showing it (for example your Glide app’s address).
Script attributes and JavaScript
| data-workspace | Required. Your board ID. |
|---|---|
| data-mode="inline" | Render inside an element instead of a slide-out panel. Use with data-target. |
| data-target="#id" | CSS selector of the element to render into (inline mode). |
| data-view="roadmap" | Open on the Roadmap view instead of the Ideas list. |
| data-launcher="false" | Hide the floating Feedback button. |
| data-position="left" | Put the Feedback button in the bottom-left corner, with the panel opening from the left. |
| UserNote.open() | Open the slide-out board from your own code. |
| UserNote.close() | Close it again. |
Board settings
Change these in your dashboard under the board’s Settings tab. They apply straight away, with no change to your embed code.
- Accent color: match the button and highlights to your brand.
- Allowed websites: limit which sites can show your board (subdomains included), so nobody can embed it elsewhere. Leave empty to allow any site.
- Require approval: new ideas stay hidden until you approve them.
- Email me about new ideas: we email your account address when someone submits an idea (on by default; at most 10 emails an hour per board).
- Slack notifications (Pro): post new ideas to a Slack channel through an incoming webhook, with a button to send a test message.
- Custom CSS (Pro): restyle the widget further.
- Remove branding (Pro): hide “Powered by UserNote”.
Frameworks and site builders
Step-by-step guides:
- Lovable →
- Bolt →
- v0 →
- Replit →
- Cursor and Claude Code →
- Webflow →
- WordPress →
- Framer →
- Next.js →
- Shopify →
- iOS and Android apps →
- Softr →
- Glide →
- FlutterFlow →
- Squarespace →
- Wix →
- Kajabi →
- Teachable →
- Circle →
npm package (React, Next.js, Vue, Svelte)
npm install usernote gives you a React component and a framework-free mount() function. Both add and remove the widget with your components, so inline boards work on routes in single-page apps too.
import { UserNote } from 'usernote/react';
<UserNote board="ws_YOUR_BOARD_ID" /> // Feedback button
<UserNote board="ws_YOUR_BOARD_ID" inline view="roadmap" /> // roadmap in the pageimport { mount } from 'usernote';
const destroy = mount({ board: 'ws_YOUR_BOARD_ID', target: document.querySelector('#feedback') });Plain HTML, React, Vue or Svelte (Vite and similar)
Or, with no package: paste the script tag into index.html, just before </body>.
Next.js
Add it once in your root layout with next/script, so the Feedback button is on every page:
import Script from 'next/script';
// in app/layout.tsx, inside <body>
<Script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" strategy="afterInteractive" />WordPress
Install the free UserNote Feedback Board plugin from the WordPress plugin directory and paste your board ID in Settings → UserNote. Without the plugin, use a header and footer code plugin (such as WPCode) and add the script tag to the footer.
Webflow
Site settings → Custom code → Footer code. Webflow only runs custom code on published sites with a paid site plan.
Inline mode in single-page apps
The plain script tag looks for its data-target element once, when it loads. In single-page apps where the page changes without a full reload, use the npm package for an inline board on one route, or use the slide-out panel with your own button, or link to your hosted board page.
Content Security Policy
If your site sends a Content-Security-Policy header, allow UserNote in these two directives:
script-src https://getusernote.com
connect-src https://getusernote.comYou don’t need 'unsafe-inline' for styles: the widget uses constructable stylesheets inside its own Shadow DOM, which a strict style-src doesn’t block (tested in Chrome). Very old browsers without constructable stylesheets (e.g. Safari before 16.4) fall back to a <style> element, which a strict policy would leave unstyled. No other domains, fonts, images or frames are used.
Size and performance
- widget.js is 14.1 KB minified and about 5 KB over the network with gzip or Brotli (measured October 2026).
- No dependencies, no cookies, no tracking. Load it with defer and it never blocks your page.
- Styles live in a Shadow DOM, so your CSS can’t break the widget and the widget can’t affect your page.
- Served from a global CDN; the board’s ideas load in one small request when the page opens.
Need help?
Customers can use the Support link in the dashboard. Everyone else can contact us at contact@getusernote.com and a real person will reply.