Install the Pinnote feedback widget

Pinnote is one line of code on every page of your site. Visitors see nothing until you choose who gets the Feedback button or invite people. Pick your platform for exact steps.

Updated 26 October 2026

<script src="https://pinnote.app/widget.js" data-project="pk_…" async></script>

Your own line, with your site key in place of pk_…, is under Install in your site's settings after you add the site.

• Webflow

  Paste one line into Webflow's site-wide footer code and publish.

• Framer

  Add the script in Framer's custom code settings, placed at the end of the body, and publish.

• WordPress

  Install the Pinnote plugin and paste your site key. No code.

• Next.js

  Add next/script to your root layout. Works with the App Router and the Pages Router.

• Squarespace

  Paste the line into Code Injection's Footer box.

• Wix

  Add it as Custom Code on all pages, at the end of the body.

• Shopify

  Paste the line into theme.liquid, just before </body>, on the theme you're building to keep it off the live store.

• HTML, React and Vite

  Add the line to every page, or once to index.html in a single-page app.

Keep private data out of screenshots

Every note comes with a screenshot of what the reviewer saw. Pinnote takes it in the reviewer's browser and hides private things first.

• It always hides what's typed or picked in form fields, text boxes, dropdowns and editable areas. Notes pinned on them don't include their text either.
• It hides anything you mark. Add data-pinnote-mask to an element and it shows as a covered block, with everything inside it.
• It hides personal details, unless you turn this off. Text that looks like an email address, a phone number or a card number shows as a grey bar. Pinnote can't reliably spot names and street addresses, so mark those areas.
• It hides every word, if you choose. Pick "All text" under Screenshots on your site's Widget page and text shows as grey bars. This suits apps full of customer data.

<section class="account" data-pinnote-mask>
  …names, emails, invoices…
</section>