Add a website feedback widget to HTML, React and Vite

Add the line to every page, or once to index.html in a single-page app. Clients you invite then click anything on the site and leave a note, with a screenshot, the page and their browser attached. Everyone else sees nothing.

Updated 22 October 2026

Before you start

Create a free Pinnote account and add your site. Its settings show your line of code, under Install, with your own site key in place of pk_….
Access to the site's files.

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

Add it to HTML, React and Vite

For a plain HTML site, paste the line just before </body> on every page (or in the shared footer template).
For React, Vue or Svelte built with Vite, paste it once into index.html in the project root. Pinnote follows route changes on its own.

Check it works

In Pinnote, open your site's settings and, under Install, click Try it on my site. It opens your site signed in as a reviewer; the Feedback button appears in the corner, and Install turns to "Installed". Then invite your client by email. They click the link and can comment straight away, with no account.

If it doesn't show up

If you use Cloudflare Rocket Loader, add data-cfasync="false" before src so the script loads normally.
Check who gets the button on your site's People page. Open the site from an invite, your share link or Try it on my site to see it as an invited person; a private window shows what visitors see.