Install · Framework

Add Sendshot to React

Add Sendshot to a React app built with Vite or Create React App.

All install guides

Option 1: index.html

The simplest way. Paste the tag before </body> in index.html:

<script async src="https://sendshot.dev/widget.js" data-key="YOUR_PROJECT_KEY"></script>

Option 2: useEffect in your root component

If you'd rather keep it in code, add this to your root App component:

import { useEffect } from "react";

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://sendshot.dev/widget.js";
  script.dataset.key = "YOUR_PROJECT_KEY";
  script.async = true;
  script.addEventListener("error", () => undefined);
  document.body.appendChild(script);
  return () => script.remove();
}, []);

Replace YOUR_PROJECT_KEY with the key from Project → Settings → Installation in your Sendshot dashboard.

Check it works

Open your site. The feedback button appears in the bottom-right corner after the page has loaded. Press Cmd/Ctrl + Shift + F to open it from the keyboard, send a test report, and it shows up in your dashboard.

No button? Make sure the domain you're on is listed in the project's allowed domains.

Get your React snippet

Create a free project to get your key. Your first 10 reports are free.

Start free