Feedback widget for Next.js

Add PushFeedback to your Next.js site.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• A Next.js 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:

'use client';

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>
  );
}

App Router: import FeedbackWidget into your existing app/layout.jsx or docs layout and render <FeedbackWidget project="<YOUR_PROJECT_ID>" /> after {children} inside <body>.

Pages Router: import it in pages/_app.jsx and render <FeedbackWidget project="<YOUR_PROJECT_ID>" /> after <Component {...pageProps} />. Move the stylesheet import from the widget component to pages/_app.jsx when using the Pages Router.

Inline button

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/InlineFeedback.jsx:

'use client';

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 the page or article layout and render <InlineFeedback project="<YOUR_PROJECT_ID>" /> after the content. For the Pages Router, move the stylesheet import from this component to pages/_app.jsx.

Embedded form

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/EmbeddedFeedback.jsx:

'use client';

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 the page or article layout and render <EmbeddedFeedback project="<YOUR_PROJECT_ID>" /> after the content. For the Pages Router, move the stylesheet import from this component to pages/_app.jsx.

Like and dislike buttons

Install the published packages:

npm install pushfeedback@latest pushfeedback-react@latest

Create components/FeedbackThumbs.jsx:

'use client';

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 the page or article layout and render <FeedbackThumbs project="<YOUR_PROJECT_ID>" /> after the content. For the Pages Router, move the stylesheet import from this component to pages/_app.jsx.

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.