Skip to content

docs(feedback): Document the new tags field #10137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 21, 2024
Merged

docs(feedback): Document the new tags field #10137

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
358c4d3
docs(feedback): Document the new tags field
ryan953 May 23, 2024
573df0d
Update docs/platforms/javascript/common/user-feedback/configuration/i…
ryan953 May 24, 2024
b6e2f6a
use PlatformLink
ryan953 Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions docs/platforms/javascript/common/user-feedback/configuration/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ The following configuration options apply to version 8.0.0 and above of the Java

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

| 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` | <code>"system" \| "light" \| "dark"</code> | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. |
| `id` | `string` | `sentry-feedback` | The `id` attribute of the `<div>` 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` | <code>"system" \| "light" \| "dark"</code> | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. |
| `id` | `string` | `sentry-feedback` | The `id` attribute of the `<div>` that contains the feedback widget. See [CSS Customization](#css-customization) for more. |
| `tags` | `Record<string, number \| string \| boolean \| bigint \| symbol \| null \| undefined>` | `{}` | <PlatformLink to="/enriching-events/tags/">Tags</PlatformLink> to set on the feedback event. |

### Auto-Inject vs. Manual Injection

Expand All @@ -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. |
Expand Down Expand Up @@ -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) => {},
});
```

Expand All @@ -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<BrowserClient>();
const feedback = client?.getIntegration(Feedback);
const feedback = getFeedback();

// Don't render custom feedback button if Feedback integration isn't installed
if (!feedback) {
Expand Down