Configuration

User Feedback Widget

The User Feedback Widget offers many customization options, and if the available options are insufficient, you can use your own UI. The following image shows which elements are customizable. The configuration keys on the left side of the image correspond to text customization and the configuration keys on the right side of the image are for theme customizations.

An image showing the available customization options for the User Feedback Widget

General

The following options can be configured for the integration in feedbackIntegration({}):

keytypedefaultdescription
autoInjectbooleantrueInjects the Feedback widget into the application when the integration is added. Set autoInject: false if you want to call feedback.attachTo() or feedback.openDialog() directly, or only want to show the widget on certain views.
showBrandingbooleantrueDisplays the Sentry logo inside of the form
colorScheme"system" | "light" | "dark""system"The color theme to use. "system" will follow your OS color scheme.

User and Form

keytypedefaultdescription
showNamebooleantrueDisplays the name field on the Feedback form, however will still capture the name (if available) from Sentry SDK context.
showEmailbooleantrueDisplays the email field on the Feedback form, however will still capture the email (if available) from Sentry SDK context.
isNameRequiredbooleanfalseRequires the name field on the Feedback form to be filled in.
isEmailRequiredbooleanfalseRequires the email field on the Feedback form to be filled in.
useSentryUserRecord<string, string>{ email: 'email', name: 'username'}Map of the email and name fields to the corresponding Sentry SDK user fields that were called with Sentry.setUser.

By default, the Feedback integration will attempt to fill in the name/email fields if you have set a user context via Sentry.setUser. By default, it expects the email and name fields to be email and username. Below is an example configuration with non-default user fields.

Copied
Sentry.setUser({
  email: "foo@example.com",
  fullName: "Jane Doe",
});

feedbackIntegration({
  useSentryUser: {
    email: "email",
    name: "fullName",
  },
});

Text Customization

Most text that you see in the default Feedback widget can be customized.

keydefaultdescription
buttonLabelReport a BugThe label of the injected button.
submitButtonLabelSend Bug ReportThe label of the submit button used in the feedback form.
cancelButtonLabelCancelThe label of the cancel button used in the feedback form.
formTitleReport a BugThe title at the top of the feedback form.
nameLabelNameThe label of the name input field.
namePlaceholderYour NameThe placeholder for the name input field.
emailLabelEmailThe label of the email input field.
emailPlaceholderyour.email@example.orgThe placeholder for the email input field.
messageLabelDescriptionThe label for the feedback description input field.
messagePlaceholderWhat's the bug? What did you expect?The placeholder for the feedback description input field.
successMessageTextThank you for your report!The message to be displayed after a succesful feedback submission.

Example of customization:

Copied
feedbackIntegration({
  buttonLabel: "Feedback",
  submitButtonLabel: "Send Feedback",
  formTitle: "Send Feedback",
});

Theme Customization

Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property id="sentry-feedback, meaning you can use the #sentry-feedback selector to define CSS variables to override.

keycss variablelightdarkdescription
background--background#ffffff#29232fBackground color of the widget (injected button and form)
backgroundHover--background-hover#f6f6f7#352f3bBackground color of the injected button when in a hover state
foreground--foreground#2b2233#ebe6efForeground color, e.g. text color
error--error#df3338#f55459Color used for error related components (e.g. text color when there was an error submitting feedback)
success--success#268d75#2da98cColor used for success-related components (e.g. text color when feedback is submitted successfully)
border--border1.5px solid rgba(41, 35, 47, 0.13)1.5px solid rgba(235, 230, 239, 0.15)The border style used for the widget (injected button and form)
borderRadius--border-radius12px12pxBorder radius style used for the widget (injected button and success message)
boxShadow--box-shadow0px 4px 24px 0px rgba(43, 34, 51, 0.12)0px 4px 24px 0px rgba(43, 34, 51, 0.12)The box shadow style used for the widget (injected button and form)
submitBackground--submit-backgroundrgba(88, 74, 192, 1)rgba(88, 74, 192, 1)Background color for the submit button
submitBackgroundHover--submit-background-hoverrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)Background color when hovering over the submit button
submitBorder--submit-borderrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)Border style for the submit button
submitOutlineFocus--submit-outline-focusrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)Outline color for the submit button, in the focused state
submitForeground--submit-foreground#ffffff#ffffffForeground color for the submit button
submitForegroundHover--submit-foreground-hover#ffffff#ffffffForeground color for the submit button when hovering
cancelBackground--cancel-backgroundtransparenttransparentBackground color for the cancel button
cancelBackgroundHover--cancel-background-hovervar(--background-hover)var(--background-hover)Background color when hovering over the cancel button
cancelBorder--cancel-bordervar(--border)var(--border)Border style for the cancel button
cancelOutlineFocus--cancel-outline-focusvar(--input-outline-focus)var(--input-outline-focus)Outline color for the cancel button, in the focused state
cancelForeground--cancel-foregroundvar(--foreground)var(--foreground)Foreground color for the cancel button
cancelForegroundHover--cancel-foreground-hovervar(--foreground)var(--foreground)Foreground color for the cancel button when hovering
inputBackground--input-backgroundinheritinheritBackground color for form inputs
inputForeground--input-foregroundinheritinheritForeground color for form inputs
inputBorder--input-bordervar(--border)var(--border)Border styles for form inputs
inputOutlineFocus--input-outline-focusrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)Outline color for form inputs when focused
formBorderRadius--form-border-radius20px20pxBorder radius style for the form
formContentBorderRadius--form-content-border-radius6px6pxBorder radius style for form content (for example: inputs, buttons)

Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration:

Copied
feedbackIntegration({
  themeLight: {
    background: "#cccccc",
  },
});

Or the same example above, but using the CSS variables method:

Copied
#sentry-feedback {
  --background: #cccccc;
}

Additional UI Customization

Similar to theme customization above, these are additional CSS variables that can be overridden. These aren't supported in the constructor.

VariableDefaultDescription
--bottom1remBy default the widget has a position of fixed, and is in the bottom right corner.
--right1remBy default the widget has a position of fixed, and is in the bottom right corner.
--topautoBy default the widget has a position of fixed, and is in the bottom right corner.
--leftautoBy default the widget has a position of fixed, and is in the bottom right corner.
--z-index100000The z-index of the widget
--font-family"'Helvetica Neue', Arial, sans-serif"Default font-family to use
--font-size14pxFont size

Event Callbacks

Sometimes it’s important to know when a user started interacting with the feedback form, so you can add custom logging, or start/stop background timers on the page until the user is done.

Pass these callbacks when you initialize the Feedback integration:

Copied
feedbackIntegration({
  onFormOpen: () => {},
  onFormClose: () => {},
  onSubmitSuccess: () => {},
  onSubmitError: () => {},
});

Bring Your Own Button

You can skip the default injected button and use your own button to trigger displaying the form. Call feedback.attachTo() to have the SDK attach a click listener to your own button. You can additionally supply the same customization options that the constructor accepts (like for text labels and colors).

Copied
const feedback = feedbackIntegration({
  // Disable injecting the default widget
  autoInject: false,
});

feedback.attachTo(document.querySelector("#your-button"), {
  formTitle: "Report a Bug!",
});

Alternatively, you can call feedback.openDialog():

Copied
import { BrowserClient, Feedback, getClient } from "@sentry/react";

function MyFeedbackButton() {
  const client = getClient<BrowserClient>();
  const feedback = client?.getIntegration(Feedback);

  // Don't render custom feedback button if Feedback integration isn't installed
  if (!feedback) {
    return null;
  }

  return (
    <button type="button" onClick={() => feedback.openDialog()}>
      Give me feedback
    </button>
  );
}

Bring Your Own Widget

You can also use your own UI components to gather feedback and pass the feedback data object to the sendFeedback() function. The sendFeedback function accepts two parameters:

  • a JavaScript object with a required message property and additionally, optional name and email properties or a FormData instance with the same properties
  • an optional "options" object
Copied
Sentry.sendFeedback(
  {
    name: "Jane Doe", // optional
    email: "email@example.org", // optional
    message: "This is an example feedback", // required
  },
  {
    includeReplay: true, // optional
  }
);

Here is a simple example:

Copied
<form id="my-feedback-form">
  <input name="name" />
  <input name="email" />
  <textarea name="message" placeholder="What's the issue?" />
</form>

Crash-Report Modal

You can customize the Crash-Report modal to your organization's needs, for example, for localization purposes. All options can be passed through the Sentry.showReportDialog call.

ParamDefault
eventIdManually set the id of the event.
dsnManually set dsn to report to.
userManually set user data [an object with keys listed below].
user.emailUser's email address.
user.nameUser's name.
lang[automatic]override for Sentry’s language code
titleIt looks like we’re having issues.
subtitleOur team has been notified.
subtitle2If you’d like to help, tell us what happened below. – not visible on small screen resolutions
labelNameName
labelEmailEmail
labelCommentsWhat happened?
labelCloseClose
labelSubmitSubmit
errorGenericAn unknown error occurred while submitting your report. Please try again.
errorFormEntrySome fields were invalid. Please correct the errors and try again.
successMessageYour feedback has been sent. Thank you!
onLoadn/a - an optional callback that will be invoked when the widget opens
onClosen/a - an optional callback that will be invoked when the widget closes

The optional callback onLoad will be called when users see the widget. You can use this to run custom logic, for example to log an analytics event:

Copied
Sentry.showReportDialog({
  // ...
  onLoad() {
    // Log an event to amplitude when the report dialog opens
    amplitude.logEvent("report_dialog_seen");
  },
});

The optional callback onClose will be called when users close the widget. You can use this to run custom logic, for example to reload the page:

Requires JS SDK version v7.82.0 or higher.

Copied
Sentry.showReportDialog({
  // ...
  onClose() {
    // Refresh the page after the user closes the report dialog
    location.reload();
  },
});
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").