Configuration

Learn about the general User Feedback configuration fields.

The User Feedback Widget offers many customization options, and if the available options are insufficient, you can use your own UI.

The following configuration options apply to version 8.0.0 and above of the JavaScript SDK. The Feedback Widget in version 7 of the SDK was a beta release and is now deprecated.

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

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.createWidget() 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.
idstringsentry-feedbackThe id attribute of the <div> that contains the feedback widget. See CSS Customization for more.

If you have autoInject: true a button will be inserted into the page that triggers the form to pop up so the user can enter their feedback. If instead you want to control when this injection happens, call the feedback.createWidget() method to get a reference to an Actor object, and then call appendToDom() to insert it into the page.

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

const widget = feedback.createWidget();
widget.appendToDom();

// Later, when it's time to clean up:
widget.removeFromDom();

Read more about how to use your own UI below.

KeyTypeDefaultDescription
showNamebooleantrueDisplays the name field on the Feedback form.
showEmailbooleantrueDisplays the email field on the Feedback form.
enableScreenshotbooleantrueAllows the user to send a screenshot attachment with their feedback. For self-hosted, release 24.4.2 is also required.
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'}Sets the email and name fields to the corresponding Sentry SDK user fields that were called with Sentry.setUser.

If you have set a user context by calling Sentry.setUser then those values will be used as defaults for the name and email fields. If those fields are hidden from the user, then the default values will still be sent along with the feedback message.

Below is an example configuration with non-default user fields.

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

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

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

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

KeyDefaultDescription
triggerLabel"Report a Bug"The label of the injected button that opens up the feedback form when clicked.
formTitle"Report a Bug"The title at the top of the feedback form.
submitButtonLabel"Send Bug Report"The label of the submit button used in the feedback form.
cancelButtonLabel"Cancel"The label of cancel buttons used in the feedback form.
confirmButtonLabel"Confirm"The label of confirm buttons used in the feedback form.
addScreenshotButtonLabel"Add a screenshot"The label of the button to add a screenshot to the form.
removeScreenshotButtonLabel"Remove screenshot"The label of the button to remove the screenshot from the form.
nameLabel"Name"The label of the name input field.
namePlaceholder"Your Name"The placeholder for the name input field.
emailLabel"Email"The label of the email input field.
emailPlaceholder"your.email@example.org"The placeholder for the email input field.
isRequiredLabel"(required)"The label shown next to an input field that is required.
messageLabel"Description"The label for the feedback description input field.
messagePlaceholder"What's the bug? What did you expect?"The placeholder for the feedback description input field.
successMessageText"Thank you for your report!"The message displayed after a successful feedback submission.

Example of customization:

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

You can customize placement of the feedback components on your page, as well as the fonts and theme colors for light and dark mode.

In all cases, you can set CSS variables to override any value. By default, the <div> container has the attribute id="sentry-feedback", so you can use the #sentry-feedback selector to define CSS variables to override defaults.

The example below shows how to customize the background color for the light and dark themes by overriding CSS variables:

Copied
#sentry-feedback {
  --trigger-background: #cccccc;
}
@media (prefers-color-scheme: dark) {
  #sentry-feedback {
    --trigger-background: #222222;
  }
}

Alternatively, you can also do the same thing by setting theme values in JavaScript:

Copied
feedbackIntegration({
  themeLight: {
    background: '#cccccc',
  },
  themeDark: {
    background: '#222222',
  },
});

The following values are only available as CSS variables, and apply to both dark and light themes.

CSS VariableDefaultDescription
--font-family"system-ui, 'Helvetica Neue', Arial, sans-serif"The default font-family to use.
--font-size14pxThe font size.
--z-index100000The z-index of the widget.
--insetauto 0 0 autoBy default, the widget has fixed position, and is in the bottom right corner.
--page-margin16pxThe margin from the edge of the screen that the widget should be positioned.

Colors can be customized by by defining CSS variables that override the default values, or by passing themeLight and/or themeDark to feedbackIntegration({}).

CSS VariableConfiguration KeyDefault Light ModeDefault Dark ModeDescription
--foregroundforeground#2b2233#ebe6efForeground (text) color.
--backgroundbackground#ffffff#29232fBackground color of the widget (injected button and form).
--accent-foregroundaccentForeground#ffffff#ffffffForeground color for the submit button.
--accent-backgroundaccentBackgroundrgba(88, 74, 192, 1)rgba(88, 74, 192, 1)Background color for the submit button.
--success-colorsuccessColor#268d75#2da98cColor used for success-related components (such as text color when feedback is submitted successfully).
--error-colorerrorColor#df3338#f55459Color used for error related components (such as text color when there's an error submitting feedback).
--box-shadowboxShadow0px 4px 24px 0px rgba(43, 34, 51, 0.12)0px 4px 24px 0px rgba(43, 34, 51, 0.12)Box shadow style used for the widget (injected button and form).
--outlineoutline1px auto var(--accent-background)1px auto var(--accent-background)Outline for form inputs when focused.

CSS variables take priority over configuration values in feedbackIntegration(). In this example, the configuration makes it seem like the text could be either white or black, but because there is a CSS variable set, the text will always be red.

Copied
<script>
  feedbackIntegration({
    themeLight: {
      foreground: 'black',
    },
    themeDark: {
      foreground: 'white',
    },
  });
</script>

<style>
  #sentry-feedback {
    --foreground: 'red'; /* overrides both `white` and `black` colors */
  }
</style>

It’s possible to set the id configuration value to something other than the default sentry-feedback and use that as a selector when overriding CSS variables.

Copied
<script>
  feedbackIntegration({
    id: 'feedback-theme', // The default is 'sentry-feedback'
  });
</script>

<style>
  #feedback-theme {
    /* Target the custom id */
    --foreground: 'red';
  }
</style>

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: () => {},
});

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.createForm() and have full control over when the form gets loaded, added to the dom, and finally shown to the user. Here is an example using JSX to define a button:

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={() => {
      const form = await feedback.createForm();
      form.appendToDom();
      form.show();
    }}>
      Give me feedback
    </button>
  );
}

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>

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").