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

General

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

Auto-Inject vs. Manual Injection

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.

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.

User and Form

User Context

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

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

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

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

Text Customization

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

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

Example of customization:

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

CSS Customization

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:

#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:

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

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

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

Theme priority

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.

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

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

Custom ID selector

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.

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

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

Event Callbacks

Because it’s sometimes useful to know when a user started interacting with the feedback form, we've made it possible for you to add custom logging, or start and stop background timers on the page that tell you when the user is done.

Pass these callbacks when you initialize the Feedback integration:

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

Bring Your Own Button

You can use your own button instead of the default injected button to trigger the form being displayed, by calling feedback.attachTo() to have the SDK attach a click listener to your button. You can also supply the same customization options that the constructor accepts (for example, for text labels and colors).

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:

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={async () => {
        const form = await feedback.createForm();
        form.appendToDom();
        form.open();
      }}
    >
      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 also optional name and email properties, or a FormData instance with the same properties.
• An optional "options" object.

Sentry.sendFeedback(
  {
    name: 'Jane Doe', // optional
    email: 'email@example.org', // optional
    message: 'This is an example feedback', // required
  },
  {
    includeReplay: true, // optional
  }
);

Here's a simple example:

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

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:

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.

Sentry.showReportDialog({
  // ...
  onClose() {
    // Refresh the window after the user closes the report dialog
    win.reload();
  },
});