Feedback widget for NPM projects

Add the PushFeedback widget via NPM.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• Node.js and a bundler that serves public/ as static files, such as Vite.

Examples use pushfeedback 0.1.87. Choose one installation mode.

Installation

Floating button

1. Install PushFeedback:

       npm install [email protected]
   mkdir -p public/pushfeedback
   cp -R node_modules/pushfeedback/dist/pushfeedback/. public/pushfeedback/

2. Add this to your browser entry file:

   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const script = document.createElement('script');
   script.type = 'module';
   script.src = '/pushfeedback/pushfeedback.esm.js';
   document.head.appendChild(script);

3. Just before the closing body tag of your website's HTML, add the following snippet:

   <feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>

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

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

Inline button

1. Install the package if needed:

       npm install [email protected]
   mkdir -p public/pushfeedback
   cp -R node_modules/pushfeedback/dist/pushfeedback/. public/pushfeedback/

2. Add this to your browser entry file:

   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const script = document.createElement('script');
   script.type = 'module';
   script.src = '/pushfeedback/pushfeedback.esm.js';
   document.head.appendChild(script);

3. Place this markup in your HTML where the content ends:

   <feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark">Feedback</feedback-button>

Embedded form

1. Install the package if needed:

       npm install [email protected]
   mkdir -p public/pushfeedback
   cp -R node_modules/pushfeedback/dist/pushfeedback/. public/pushfeedback/

2. Add this to your browser entry file:

   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const script = document.createElement('script');
   script.type = 'module';
   script.src = '/pushfeedback/pushfeedback.esm.js';
   document.head.appendChild(script);

3. Place this markup in your HTML where the content ends:

   <feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>

Like and dislike buttons

1. Install the package if needed:

       npm install [email protected]
   mkdir -p public/pushfeedback
   cp -R node_modules/pushfeedback/dist/pushfeedback/. public/pushfeedback/

2. Add this to your browser entry file:

   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const script = document.createElement('script');
   script.type = 'module';
   script.src = '/pushfeedback/pushfeedback.esm.js';
   document.head.appendChild(script);

3. Place this markup in your HTML where the content ends:

   <p>Was this helpful?</p>
   <div class="pushfeedback-thumbs-row">
     <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="light" custom-font="true">
       Helpful
     </feedback-button>
     <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="light" custom-font="true">
       Not helpful
     </feedback-button>
   </div>

Self-hosted assets

Keep the entire dist/pushfeedback/ directory together. Its entry script loads the other files in that directory at runtime. Copy it again after a package upgrade.

The examples serve public/pushfeedback/ at /pushfeedback/. If your site uses a base path, update the script URL to include it. Other frameworks may use static/ instead of public/. Do not import pushfeedback.esm.js into the bundle unless your build also preserves its runtime files.

To use these assets from a React or Vue example, keep its component and stylesheet imports, and replace the CDN script.src with the URL where your site serves pushfeedback.esm.js.

Next steps

• Customization: Adjust the widget's layout, styles, and text.
• Integrations: Forward feedback to Slack, email, Jira, and more.