FeatureCard

The <FeatureDialog> component is a modeless 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.

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

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

Edit this page on GitHub

Components: FeatureCard

Components: GifPlayer