Feedback Rocket - Integration GuidesUsing Feedback Rocket with a React Application

Integrating Feedback Rocket with React is straightforward, and once it’s done, you’ll be able to collect user feedback from any site you build on top of React.

Step 1: Create a new React Application

First, make sure you have Node.js and npm installed on your machine. You can check by running:

node -v && npm -v

If they’re not installed, download and install Node.js (which includes npm) from the official website.

Now, let’s create a new React app using Create React App, a popular toolchain for building React applications. If you don’t have it installed, the following command will prompt you to install it before kicking off the creation process:

npx create-react-app feedback-rocket-app

This command will create a new React application in a directory called `feedback-rocket-app`.

Step 2: Integrate Feedback Rocket

We’re going to use `react-hemlet` to manage the ‘head’ section of our HTML within our React app. This module is optional if you already have a way to add a script tag to the head of your HTML.

First, install `react-helmet`:

cd feedback-rocket-app && npm install react-helmet

Now, let’s add the Feedback Rocket script tag to our React application. We’ll do this in the top-level component (`App.js`), though you can include it in whatever component is rendered on every page you want to collect feedback on.

Modify your `App.js` as follows:

import React from 'react';
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <script async src="/sdk/v1.2.js" data-fr-id={process.env.REACT_APP_FR_ID} data-fr-theme="light" />
      </Helmet>
      {/* The rest of of your app */}
    </div>
  );
}

export default App;

Note that we’re using process.env.REACT_APP_FR_ID to inject the `data-fr-id` property—the bit which tells Feedback Rocket where to send the actual feedback—from an environment variable. Let’s explore how to configure that.

Step 3: Create the environment variable

We need to define REACT_APP_FR_ID as an environment variable. You can do this in a `.env` file in the root of your React app like so:

REACT_APP_FR_ID=abcd_1234

Make sure you replace `abcd_1234` with your actual Feedback Rocket ID, which you’ll find under Your Account » Widget setup. Note: Prefixing `REACT_APP_` is a standard naming convention for Create React App, and it ensures that these variables will be embedded into the build.

Step 4: Start your App

Let’s start your app by running:

npm start

Now, you can go to `localhost:3000` in your browser, but while the Feedback Rocket script tag is being included on every page, it won’t do anything just yet.

Step 5: Add a Feedback Button

Now that we have our Feedback Rocket script running on every page of our application, we need to create a way for our users to trigger it. To do this, we’re going to add a button that the user can click to open the feedback dialog. Update your `App.js` file to include the Feedback Rocket trigger button:

import React from 'react';
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <script async src="/sdk/v1.2.js" data-fr-id={process.env.REACT_APP_FR_ID} data-fr-theme="light" />
      </Helmet>
      {/* The rest of your app */}
      <button data-fr-widget>Leave us some feedback</button>
    </div>
  );
}

export default App;

Now, whenever a user clicks on the “Leave us some feedback” button, the Feedback Rocket dialog will pop up, allowing them to leave their feedback.

That’s it—you have successfully integrated Feedback Rocket into your React application.