FeedbackDialog
The
<FeedbackDialog>
Activating the dialog
The Feedback button only becomes visible once you’ve supplied an
onSubmit
FeedbackDialog
-
Create a new javascript file under
. Matching the filepath exactly is important here.src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js -
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
- : “Negative”, “Positive” or “Neutral”experience
- : An optional commentcomment
- : the window location when the survey was submittedpath
const FeedbackDialog = ({ props }) => {const onSubmit = data => {fetch(process.env.API_ENDPOINT, {method: 'POST',body: JSON.stringify(data),});return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;};