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 visible once you’ve supplied an

onSubmit

handler. To do that, we’ll need to shadow the

FeedbackDialog

component.

Create a new javascript file under
```
src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js
```
. Matching the filepath exactly is important here.
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} />;
};

export default FeedbackDialog;
Copy to clipboard

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} />;
};
Copy to clipboard

Edit this page on GitHub

Components: FeatureCard

Components: GifPlayer