> ## Documentation Index > Fetch the complete documentation index at: https://docs.usesuperflow.com/llms.txt > Use this file to discover all available pages before exploring further. # Setup > How to setup Superflow with React.js [Github Repo](https://github.com/benjvelt/superflow-react) [Demo](https://superflow-react.vercel.app/?review=true) ## 1) Enter Your Site URL Enter the site URL you want Superflow to be installed in. ## 2) Select NPM from the list of Platforms Choose NPM from the list of options to install Superflow with React.js. ## 3) Copy your unique Superflow Code Copy the code from the section "Initialize Superflow" ## 4) Install the Superflow NPM package Install the Superflow NPM package with: ``` npm i @usesuperflow/client ``` ## 5) Import Superflow into your `App.js` file Import the Superflow NPM package with: ``` import { initSuperflow } from '@usesuperflow/client' ``` ## 6) Initialize Superflow within `App.js` Import `initSuperflow` from the NPM package and use it to initialize Superflow. Create a `useEffect` hook and paste in the unique Superflow code you copied earlier. ```js theme={null} import './App.css'; import logo from './logo.svg'; import { initSuperflow } from '@usesuperflow/client'; import { useEffect } from 'react'; function App() { useEffect( () => { //initialize Superflow initSuperflow('YOUR_API_KEY', { projectId: 'YOUR_PROJECT_ID' }); }) return (
logo

Test out Superflow by highlighting this text.

); } export default App; ``` ## 7) Deploy your React app with your changes. Deploy your React app with your new changes. ## 8) Verify your Installation Verify your Superflow installation by clicking the Verify button on the onboarding flow. If successful, you should be redirected to your published React site and see the following success message: ## 9) Troubleshooting Having trouble getting your verifying your installation? Here are the common mistakes users encounter when installing Superflow: * Did you forget to save the Custom Code? * Did you forget to publish your site? * Is the browser still loading a cached version? * Did you add `?review=true` at the end of your url? * Did you publish your changes on a staging URL while you are trying to access a Prod URL? * Did you accidentally install multiple Superflow scripts in the Custom Code? ## 10) Navigate to your React site Now that you have verified that Superflow has been installed on your React site, navigate to your published site and add `?review=true` at the end of the URL to enable Superflow. `Example: mywebsite.com/?review=true` ## 11) Test out Superflow You should now see a Superflow toolbar on the bottom right of your screen. ## 12) Dropping your first comment Try leaving a comment on your page. You can leave a comment in several different ways: * By highlighting any text * By hovering over any element on the page * By drawing a box anywhere on the page You can also leave voice and screen recordings in your comments as well!