Feedback widget for Docusaurus

Add the PushFeedback widget in a Docusaurus project using the official plugin.

Prerequisites

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

The floating-button plugin supports Docusaurus 3. For Docusaurus 2, use the React setup below. Other modes use pushfeedback-react.

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

1. Install PushFeedback:

   npm install docusaurus-pushfeedback@latest

2. Add the plugin to your Docusaurus config file docusaurus.config.js:

   plugins: [
       [
           'docusaurus-pushfeedback',{
               project: '<YOUR_PROJECT_ID>'
           }
       ]
   ],

   Replace <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard.

3. Open your site. Click Feedback to check that the form opens.

Docusaurus 2

Install the React wrapper and widget stylesheet:

npm install pushfeedback@latest pushfeedback-react@latest

Create src/theme/Root.js. If it already exists, keep its content and add the widget after {children}:

import React, { useEffect } from 'react';
import { FeedbackButton } from 'pushfeedback-react';
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';

export default function Root({ children }) {
  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 (
    <>
      {children}
      <FeedbackButton
        project="<YOUR_PROJECT_ID>"
        button-position="center-right"
        modal-position="sidebar-right"
        button-style="dark"
      >
        Feedback
      </FeedbackButton>
    </>
  );
}

Replace <YOUR_PROJECT_ID> with your project ID. Open your site and click Feedback to check the form.

Customization

You can change the widget's position, color, and more. Add any configuration and text option to the plugin, formatted as camelCase.

Here's an example:

plugins: [
    [
        'docusaurus-pushfeedback',{
            project: '<YOUR_PROJECT_ID>',
            buttonPosition: 'center-right',
            modalPosition: 'sidebar-right',
            buttonStyle: 'dark',
            modalTitle: 'Share your thoughts'
        }
    ]
],

Set CSS custom properties in your existing Docusaurus custom stylesheet. See Docusaurus custom CSS if the site has no stylesheet yet.

Other installation modes

Inline button

1. Install the React widget package:

   npm install pushfeedback@latest pushfeedback-react@latest

2. Run npm run swizzle @docusaurus/theme-classic DocItem/Footer and choose Wrap. Replace src/theme/DocItem/Footer/index.js with:

   import React, { useEffect } from 'react';
   import Footer from '@theme-original/DocItem/Footer';
   import { FeedbackButton } from 'pushfeedback-react';
   
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   function PageFeedback() {
     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="<YOUR_PROJECT_ID>"
         button-position="default"
         modal-position="center"
         button-style="dark"
         screenshot-positioning="true"
       >
         Feedback
       </FeedbackButton>
     );
   }
   
   export default function FooterWrapper(props) {
     return (
       <>
         <Footer {...props} />
         <PageFeedback />
       </>
     );
   }

This wrapper loads the stylesheet and custom elements and places the widget after each document. Remove docusaurus-pushfeedback from your config if you do not want its floating button.

Embedded form

1. Install the React widget package:

   npm install pushfeedback@latest pushfeedback-react@latest

2. Run npm run swizzle @docusaurus/theme-classic DocItem/Footer and choose Wrap. Replace src/theme/DocItem/Footer/index.js with:

   import React, { useEffect } from 'react';
   import Footer from '@theme-original/DocItem/Footer';
   import { FeedbackModal } from 'pushfeedback-react';
   
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   function PageFeedback() {
     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="<YOUR_PROJECT_ID>" embedded="true" />;
   }
   
   export default function FooterWrapper(props) {
     return (
       <>
         <Footer {...props} />
         <PageFeedback />
       </>
     );
   }

This wrapper loads the stylesheet and custom elements and places the widget after each document. Remove docusaurus-pushfeedback from your config if you do not want its floating button.

Like and dislike buttons

1. Install the published widget and React wrapper:

   npm install pushfeedback@latest pushfeedback-react@latest

2. Run npm run swizzle @docusaurus/theme-classic DocItem/Footer and choose Wrap. Replace src/theme/DocItem/Footer/index.js with:

   import React, { useEffect } from 'react';
   import Footer from '@theme-original/DocItem/Footer';
   import { FeedbackButton } from 'pushfeedback-react';
   
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   export default function FooterWrapper(props) {
     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 (
       <>
         <Footer {...props} />
         <p>Was this helpful?</p>
         <div className="pushfeedback-thumbs-row">
           <FeedbackButton
             project="<YOUR_PROJECT_ID>"
             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="<YOUR_PROJECT_ID>"
             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>
       </>
     );
   }

Each button opens the form with its rating selected. The visitor still clicks Send to submit. Remove docusaurus-pushfeedback from your config if you want only these buttons.

Advanced setup: Multilingual support

With Docusaurus i18n enabled:

1. Install the widget packages:

   npm install pushfeedback@latest pushfeedback-react@latest

2. Run npm run swizzle @docusaurus/theme-classic Footer and choose Wrap. Replace src/theme/Footer/index.js with:

   import React, { useEffect } from 'react';
   import Footer from '@theme-original/Footer';
   import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
   import { FeedbackButton } from 'pushfeedback-react';
   
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const labels = {
     en: { button: 'Feedback', title: 'Share your feedback', send: 'Send' },
     es: { button: 'Sugerencias', title: 'Danos tu opinión', send: 'Enviar' },
   };
   
   export default function FooterWrapper(props) {
     const { i18n } = useDocusaurusContext();
     const text = labels[i18n.currentLocale] || labels.en;
     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 (
       <>
         <Footer {...props} />
         <FeedbackButton
           project="<YOUR_PROJECT_ID>"
           button-position="bottom-right"
           button-style="dark"
           modal-title={text.title}
           send-button-text={text.send}
         >
           {text.button}
         </FeedbackButton>
       </>
     );
   }

Replace the project ID and add your languages to labels. This example translates the button, title, and send action. Add the remaining labels from Text to translate the full form. Remove docusaurus-pushfeedback from your config if you want only this button.

Verify the installation

Run npm run build, then npm run serve. Open a document, send a test message, and confirm it appears in your PushFeedback project. For multilingual sites, check each locale. Check allowed URLs if submission fails.