UserNote
Log in

Add a feedback board to Framer

Add a Feedback button, a feedback board or your public roadmap to your Framer site with the free UserNote component from the Framer Marketplace.

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.

With the UserNote component (recommended)

  • Open the UserNote component on the Framer Marketplace and copy it into your project.
  • Drag UserNote from the Assets panel onto a page.
  • In the properties panel, paste your board ID and choose what to show: Feedback button, Board or Roadmap.

On the canvas the component shows a preview with sample ideas; your real board runs in Preview and on your published site. For a Feedback button on every page, put the component in a shared header or footer, and set Position to Bottom left on the free Framer plan, so the “Made in Framer” badge doesn’t cover it. Board and Roadmap fit the component’s frame and scroll inside it, so give it a fixed height (about 640 px works well). The component works on any Framer plan.

Without the component: a Feedback button on every page

  • In Framer, open Site settings → General and scroll to Custom code.
  • Paste this into End of <body> tag and save:
<script src="https://getusernote.com/widget.js" data-workspace="ws_YOUR_BOARD_ID" defer></script>

Publish your site and check it on the live URL: custom code doesn’t run in the Framer editor preview, and Framer only outputs it on sites with a paid site plan.

No code at all: link to your hosted board

Every board has its own public page. Add a “Feedback” or “Roadmap” link to your navigation or footer (use a normal link to the URL) pointing at it; it works on any plan, with nothing to install.

https://getusernote.com/b/ws_YOUR_BOARD_ID
https://getusernote.com/b/ws_YOUR_BOARD_ID?view=roadmap

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.
Get Started Free