` that contains the feedback widget. See [CSS Customization](#css-customization) for more. |
+| Key | Type | Default | Description |
+| -------------- | ----------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `autoInject` | `boolean` | `true` | Injects 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. |
+| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. |
+| `colorScheme` |
"system" \| "light" \| "dark" | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. |
+| `id` | `string` | `sentry-feedback` | The `id` attribute of the `
` that contains the feedback widget. See [CSS Customization](#css-customization) for more. |
+| `tags` | `Record
` | `{}` | Tags to set on the feedback event. |
### Auto-Inject vs. Manual Injection
@@ -46,6 +47,8 @@ Read more about how to [use your own UI](#bring-your-own-button) below.
### User and Form
+The following options can be configured for the integration in `feedbackIntegration({})`:
+
| Key | Type | Default | Description |
| ------------------ | ------------------------ | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `showName` | `boolean` | `true` | Displays the name field on the feedback form. |
@@ -209,14 +212,14 @@ feedbackIntegration({
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:
+The following options can be configured for the integration in `feedbackIntegration({})`:
```javascript
feedbackIntegration({
onFormOpen: () => {},
onFormClose: () => {},
- onSubmitSuccess: () => {},
- onSubmitError: () => {},
+ onSubmitSuccess: (data: FeedbackFormData) => {},
+ onSubmitError: (error: Error) => {},
});
```
@@ -238,11 +241,10 @@ feedback.attachTo(document.querySelector("#your-button"), {
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:
```typescript
-import { BrowserClient, Feedback, getClient } from "@sentry/react";
+import { getFeedback } from "@sentry/react";
function MyFeedbackButton() {
- const client = getClient();
- const feedback = client?.getIntegration(Feedback);
+ const feedback = getFeedback();
// Don't render custom feedback button if Feedback integration isn't installed
if (!feedback) {