Skip to main contentGatsby theme Carbon

FeedbackDialog

The <FeedbackDialog> component is a non-modal dialog that allows your users to provide low-friction, anonymous feedback for a specific page.

Activating the dialog

The Feedback button only becomes visisble once you’ve supplied an onSubmit handler. To do that, we’ll need to shadow the FeedbackDialog component.

  1. Create a new javascript file under src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js. Matching the filepath exactly is important here.

  2. Copy the following snippet into your new file

import React from 'react';
import ThemeFeedbackDialog from 'gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog';
const FeedbackDialog = ({ props }) => {
const onSubmit = data => {
console.log({ ...data });
};
return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;

Creating a handler

Next, you’ll need a place to send the data. For the Carbon website, we use a serverless function that forwards the data to a SurveyGizmo quiz. You can see that function here.

The handler can send a fetch request off to the endpoint you create. Update the onSubmit handler to send the data wherever you want. This function receives the following arguments:

  • experience: “Negative”, “Positive” or “Neutral”
  • comment: An optional comment
  • path: the window location when the survey was submitted
const FeedbackDialog = ({ props }) => {
const onSubmit = data => {
fetch(process.env.API_ENDPOINT, {
method: 'POST',
body: JSON.stringify(data),
});
return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;
};