Feedback widget for Gatsby

Add PushFeedback to your Gatsby site.

Prerequisites

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

1. Install PushFeedback:

   npm install pushfeedback@latest pushfeedback-react@latest

2. In the main component where you wish to place the feedback button (often src/pages/index.js), embed the PushFeedback button:

   import React, { useEffect } from 'react';
   
   import { FeedbackButton } from 'pushfeedback-react';
   
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   const IndexPage = () => {
     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 className="page-layout">
         {/* Other components and content */}
         <FeedbackButton
           project="<YOUR_PROJECT_ID>"
           button-position="bottom-right"
           modal-position="bottom-right"
           button-style="dark"
         >
           Feedback
         </FeedbackButton>
       </div>
     );
   };
   
   export default IndexPage;

   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.

Inline button

Install pushfeedback-react if it is not already in your project:

npm install pushfeedback@latest pushfeedback-react@latest

Create InlineFeedback.jsx with the widget stylesheet, loader, and component:

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

Render <InlineFeedback project="<YOUR_PROJECT_ID>" /> where you want it in the content.

Embedded form

Install pushfeedback-react if it is not already in your project:

npm install pushfeedback@latest pushfeedback-react@latest

Create EmbeddedFeedback.jsx with the widget stylesheet, loader, and component:

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" />;
}

Render <EmbeddedFeedback project="<YOUR_PROJECT_ID>" /> where you want it in the content.

Like and dislike buttons

Install pushfeedback-react if it is not already in your project:

npm install pushfeedback@latest pushfeedback-react@latest

Create FeedbackThumbs.jsx with the widget stylesheet, loader, and component:

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"
          custom-font="true"
          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"
          custom-font="true"
          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>
  );
}

Render <FeedbackThumbs project="<YOUR_PROJECT_ID>" /> after the article content.

Next steps

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