Feedback widget for React

Add PushFeedback to your React site.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• A React application and Node.js installed.

Examples use @latest. Replace it with a version number to pin a release.

The examples load the widget runtime from jsDelivr and import the installed stylesheet. For a local runtime, see self-hosted assets.

Installation

Floating button

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/FeedbackWidget.jsx:

import React, { useEffect } from 'react';
import { FeedbackButton } from 'pushfeedback-react';

import 'pushfeedback/dist/pushfeedback/pushfeedback.css';

export default function FeedbackWidget({ project }) {
  useEffect(() => {
    if (document.querySelector('script[data-pushfeedback]')) return;
    const script = document.createElement('script');
    script.type = 'module';
    script.src =
      'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
    script.dataset.pushfeedback = '';
    document.head.appendChild(script);
  }, []);
  return (
    <FeedbackButton
      project={project}
      button-position="bottom-right"
      modal-position="sidebar-right"
      button-style="dark"
    >
      Feedback
    </FeedbackButton>
  );
}

Import FeedbackWidget into your page and render <FeedbackWidget project="<YOUR_PROJECT_ID>" /> in your app layout.

Inline button

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/InlineFeedback.jsx:

import React, { useEffect } from 'react';
import { FeedbackButton } from 'pushfeedback-react';

import 'pushfeedback/dist/pushfeedback/pushfeedback.css';

export default function InlineFeedback({ project }) {
  useEffect(() => {
    if (document.querySelector('script[data-pushfeedback]')) return;
    const script = document.createElement('script');
    script.type = 'module';
    script.src =
      'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
    script.dataset.pushfeedback = '';
    document.head.appendChild(script);
  }, []);
  return (
    <FeedbackButton
      project={project}
      button-position="default"
      modal-position="center"
      button-style="dark"
      screenshot-positioning="true"
    >
      Feedback
    </FeedbackButton>
  );
}

Import InlineFeedback into your page and render <InlineFeedback project="<YOUR_PROJECT_ID>" /> after the content.

Embedded form

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/EmbeddedFeedback.jsx:

import React, { useEffect } from 'react';
import { FeedbackModal } from 'pushfeedback-react';

import 'pushfeedback/dist/pushfeedback/pushfeedback.css';

export default function EmbeddedFeedback({ project }) {
  useEffect(() => {
    if (document.querySelector('script[data-pushfeedback]')) return;
    const script = document.createElement('script');
    script.type = 'module';
    script.src =
      'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
    script.dataset.pushfeedback = '';
    document.head.appendChild(script);
  }, []);
  return <FeedbackModal project={project} embedded="true" />;
}

Import EmbeddedFeedback into your page and render <EmbeddedFeedback project="<YOUR_PROJECT_ID>" /> after the content.

Like and dislike buttons

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/FeedbackThumbs.jsx:

import React, { useEffect } from 'react';
import { FeedbackButton } from 'pushfeedback-react';

import 'pushfeedback/dist/pushfeedback/pushfeedback.css';

export default function FeedbackThumbs({ project }) {
  useEffect(() => {
    if (document.querySelector('script[data-pushfeedback]')) return;
    const script = document.createElement('script');
    script.type = 'module';
    script.src =
      'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
    script.dataset.pushfeedback = '';
    document.head.appendChild(script);
  }, []);
  return (
    <div>
      <p>Was this helpful?</p>
      <div className="pushfeedback-thumbs-row">
        <FeedbackButton
          project={project}
          rating="1"
          button-position="default"
          modal-position="center"
          button-style="default"
          screenshot-positioning="true"
          hide-icon="true"
        >
          <svg
            width="22"
            height="22"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="M7 10v12" />
            <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z" />
          </svg>
          <span className="pushfeedback-thumb-label">Helpful</span>
        </FeedbackButton>
        <FeedbackButton
          project={project}
          rating="0"
          button-position="default"
          modal-position="center"
          button-style="default"
          screenshot-positioning="true"
          hide-icon="true"
        >
          <svg
            width="22"
            height="22"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="M17 14V2" />
            <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z" />
          </svg>
          <span className="pushfeedback-thumb-label">Not helpful</span>
        </FeedbackButton>
      </div>
    </div>
  );
}

Import FeedbackThumbs into your page and render <FeedbackThumbs project="<YOUR_PROJECT_ID>" /> after the content.

Each button opens the form with its rating selected. The visitor still clicks Send to submit.

Verify the installation

Run npm run build and open your site. Submit a test message and confirm it appears in Projects > your project > Feedback. If submission fails, check the allowed URLs.

Next steps

See Layout, Styles, and Text for widget options.