# Feedback widget for React
> For the complete documentation index, see [llms.txt](/llms.txt)
> Feedback widget for React
PushFeedback collects user feedback directly from your website. This guide covers installation in a React project using NPM.
## Prerequisites
Before you begin, you need:
- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
- A React application and Node.js installed.
## Installation
### Floating button
1. Install PushFeedback:
```console
npm install pushfeedback-react
```
:::info
If you're using yarn as your package manager, run `yarn add pushfeedback-react` instead of the npm command above.
:::
1. In the main component where you wish to place the feedback button (often `src/App.js`), embed the PushFeedback button:
```ts
function App() { useEffect(() => { if (typeof window !== 'undefined') { defineCustomElements(window);}}, []);
return (
{/* Other components and content */}
Feedback
);}
export default App;
```
Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
1. Start your React app by running `npm start` or `yarn start` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site.
### Inline button
Install `pushfeedback-react` if it is not already in your project:
```console
npm install pushfeedback-react
```
Create `InlineFeedback.jsx` with the widget stylesheet, loader, and component:
```jsx
export default function InlineFeedback({ project }) { useEffect(() => { defineCustomElements(window); }, []);
return Feedback;}
```
Render `` where you want it in the content.
### Embedded form
Install `pushfeedback-react` if it is not already in your project:
```console
npm install pushfeedback-react
```
Create `EmbeddedFeedback.jsx` with the widget stylesheet, loader, and component:
```jsx
export default function EmbeddedFeedback({ project }) { useEffect(() => { defineCustomElements(window); }, []);
return ;}
```
Render `` where you want it in the content.
### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons}
Install `pushfeedback-react` if it is not already in your project:
```console
npm install pushfeedback-react
```
Create `FeedbackThumbs.jsx` with the widget stylesheet, loader, and component:
```jsx
export default function FeedbackThumbs({ project }) { useEffect(() => { defineCustomElements(window); }, []);
return (
Was this helpful?
Helpful
Not helpful
);}
```
Render `` after the article content.
## Next steps
Choose what to do next:
- [Customization](/category/customization) — Adjust the widget's layout, styles, and text.
- [Integrations](/category/integrations) — Forward feedback to Slack, email, Jira, and more.