Skip to content

Commit a29a039

Browse files
sfanahataShannon Anahata
sfanahata
and
Shannon Anahata
authored
Updating feedback basics to be clearer (#15238)
## DESCRIBE YOUR PR - Make the images smaller so the page is more scrollable - Move more complicated and specific examples to the bottom of the page - Add a simpler and straightforward instruction for getting started at the top Preview: https://sentry-docs-git-feedback-basics-updates.sentry.dev/product/sentry-basics/user-feedback-basics/ ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) --------- Co-authored-by: Shannon Anahata <[email protected]>
1 parent bf9ee16 commit a29a039

File tree

1 file changed

+127
-42
lines changed

1 file changed

+127
-42
lines changed

‎docs/product/sentry-basics/user-feedback-basics.mdx‎

Lines changed: 127 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,123 @@ sidebar_order: 2
44
description: "Learn how to configure and deploy Sentry's User Feedback widget to capture qualitative insights from your users."
55
---
66

7-
Sentry's [User Feedback Widget](/product/user-feedback/) is a powerful tool for capturing qualitative insights from real users, and is especially valuable during the rollout of new or beta features. Alternatively, it can be used to collect feedback from your fellow team members during an internal release.
7+
Sentry's [User Feedback Widget](/product/user-feedback/) is a powerful tool for capturing qualitative insights from real users, and is especially valuable during the rollout of new or beta features. It can also be used to collect feedback from your fellow team members during an internal release.
88

9-
Treat user feedback as a core signal in product development, especially for betas and early adopter programs. We recommend you integrate feedback review into planning, stand-ups, or retros; then you can use feedback trends to inform product direction and roadmap decisions.
9+
If you treat user feedback as a core signal in product development, especially for betas and early adopter programs, your final product will result in a better user experience. Once you've configured feedback, we recommend adding feedback reviews into planning, stand-ups, or retros to help inform product direction and roadmap decisions.
1010

11-
This 4-step guide will walk you through implementing and instrumenting User Feedback on your application.
11+
This 4-step guide will walk you through implementing and instrumenting User Feedback for your application.
1212

1313
## 1. Embed the Widget Contextually
14-
Bring the widget to the user; don't make them go find it.
14+
Bring the widget to the user; instead of making them find it.
1515

1616
Embed the feedback widget directly into experimental or high-impact feature areas. For example, on your checkout screen:
1717

18-
![](feedback-img/img/feedback-on-checkout-page.png)
18+
![Feedback widget on checkout page =650x](feedback-img/img/feedback-on-checkout-page.png)
19+
20+
### Basic Implementation
21+
22+
Before implementing, make sure you've set up the User Feedback integration for your platform. See the [User Feedback setup documentation](/product/user-feedback/setup/) for platform-specific installation instructions.
23+
24+
Here's a simple example of how to open the feedback form with a button click. This example shows a React implementation. The specific code will vary based on your platform.
25+
26+
**Javascript Example: Simple Feedback Button**
27+
28+
```javascript
29+
import * as Sentry from "@sentry/react";
30+
31+
function FeedbackButton() {
32+
const feedback = Sentry.getFeedback();
33+
34+
if (!feedback) {
35+
return null;
36+
}
37+
38+
return (
39+
<button
40+
onClick={async () => {
41+
const form = await feedback.createForm();
42+
form.appendToDom();
43+
form.open();
44+
}}
45+
>
46+
Give Feedback
47+
</button>
48+
);
49+
}
50+
```
51+
52+
## 2. Customize Placeholder Text
53+
Personalized prompts lead to better feedback. Tailor the placeholder text to the feature's context.
54+
55+
You can customize the text prompt shown to users in the feedback form. The configuration option varies by platform. It's commonly `messagePlaceholder` for frontend SDKs or `labelComments` for backend crash-report modals.
56+
57+
<details>
58+
<summary>**JavaScript Example**</summary>
59+
60+
```javascript
61+
const form = await feedback.createForm({
62+
messagePlaceholder: 'How was your experience with checkout?',
63+
});
64+
```
65+
66+
</details>
67+
68+
Here are examples of placeholder text to guide users:
69+
70+
> How was your experience with [your feature's name]?
71+
72+
> How can we make your experience better?
73+
74+
> We're still building out [your feature's name] - how can we make it better?
75+
76+
It's best to customize your prompts to be specific and clear; this will guide the user to provide useful input. Use friendly language to encourage honest, casual feedback.
77+
78+
79+
## 3. Add Custom Tags to Feedback Submissions For Better Routing
80+
81+
If you have multiple feedback buttons in your application that are embedded into different features, tags are critical in order to enable faster alert routing and triaging to the right teams.
82+
83+
You can auto-apply tags based on the widget’s placement. For example, use a custom tag like `feedback.source:checkout`. This allows for routing in Slack and filtering in dashboards. We recommend you define and standardize tags using a single key, such as `feedback.source`.
84+
85+
86+
## 4. Set Up Alerts to Relevant Channels
87+
Feedback is only useful if seen by the right folks.
88+
89+
You can send User Feedback directly into the appropriate team’s channel—whether you use Slack, Microsoft Teams, or Discord (see [complete list of integrations](/product/alerts/create-alerts/routing-alerts/#integrations)). For example, you can tag feedback `feedback.source:checkout` and always have it go to your `#proj-billing` channel in Slack. With this workflow, engineers see feedback in near-real time and take ownership.
90+
91+
Follow the steps below to set up feedback alerts to relevant channels:
92+
93+
1. Create a [New Alert Rule](https://sentry.io/alerts/new/issue/) in Sentry.
94+
2. Scroll to the "Set conditions" section and set the "IF" filter to `The issue's category is equal to… "Feedback"` and `The event's tags match... [your custom tag]`.
95+
3. In the “THEN” filter, select `Send a [your integration] notification` and then add details of the channel you'd like to send the feedback to. You can also add tags you’d like to see on the feedback alert. For example, `user.email`.
96+
4. Add an alert name and owner.
97+
98+
99+
![Feedback alert conditions =700x](feedback-img/img/feedback-alert-conditions.png)
100+
101+
Once set up, here's what an example alert looks like:
102+
103+
![Example feedback alert =600x](feedback-img/img/feedback-example-alert.png)
104+
105+
## Example Use Cases
106+
107+
<Alert level="info">
108+
109+
The examples and customizations below are available for platforms that support the **User Feedback Widget** (such as JavaScript, React Native, Flutter, Android, and iOS). If you're using a backend SDK, you may have more limited customization options. Check your [platform's documentation](/product/user-feedback/setup/) for specific features and capabilities.
110+
111+
</Alert>
112+
113+
### Thumbs Up/Down Buttons
19114

20115
One approach you can take is using thumbs up/down buttons placed contextually within the feature that will trigger the feedback form to open. You can track whether a user clicked on the 👍 or 👎 for each feedback with [custom tags](/platforms/javascript/enriching-events/tags/). The tag will appear on the User Feedback Details page, and optionally on the feedback alert itself after feedback is submitted.
21116

22-
![](feedback-img/img/feedback-thumbs-up-down.png)
117+
**Customizations for Thumbs Up/Down Buttons:**
118+
- Use different `messagePlaceholder` text for positive vs. negative feedback ("What did you like most?" vs. "How can we improve?")
119+
- Add custom tags like `feedback.type:positive` or `feedback.type:negative` to easily filter sentiment
120+
- Customize `successMessageText` to encourage specific actions ("Thanks! Want to share more?" or "Thanks for helping us improve!")
121+
- Hide name/email fields (`showName: false`, `showEmail: false`) for quick, frictionless feedback
23122

123+
![Thumbs up/down feedback buttons =600x](feedback-img/img/feedback-thumbs-up-down.png)
24124

25125
<details>
26126
<summary>**See Example JavaScript Code Snippet**</summary>
@@ -79,50 +179,35 @@ export default function ThumbsUpDownButtons({source}: {source: string) {
79179
80180
</details>
81181
182+
<br />
82183
184+
### Beta Feature Feedback
83185
84-
## 2. Customize Placeholder Text
85-
Personalized prompts lead to better feedback. Tailor the placeholder text to the feature’s context.
86-
87-
88-
Here are examples of placeholder text to guide users:
89-
90-
> How was your experience with [your feature's name]?
186+
When rolling out a new or experimental feature, add a feedback button directly within the feature UI. Use custom tags to identify which beta feature the feedback relates to, making it easy to aggregate insights and track feedback trends over time.
91187
92-
> How can we make your experience better?
188+
**Cusotmizations for Beta Feedback:**
189+
- Enable screenshots (`enableScreenshot: true`) so users can show specific UI issues or suggestions
190+
- Auto-populate user info (`useSentryUser`) to reduce friction for logged-in users
191+
- Customize the button label (`triggerLabel: "Give Feedback on [Feature Name]"`) to be feature-specific
192+
- Use `colorScheme` or custom CSS to match your beta feature's branding
193+
- Add a callback (`onSubmitSuccess`) to show a custom "Thanks for being a beta tester!" message
93194
94-
> We're still building out [your feature's name] - how can we make it better?
195+
**Example implementation:**
196+
Add a "Give Feedback" button or link within your beta feature's interface, tagged with `feedback.source:beta-feature-name` and `feedback.type:beta`. This ensures all feedback goes to your product team's dedicated channel.
95197
198+
### Post-Transaction Feedback
96199
200+
Trigger a feedback prompt after users complete critical actions like checkout, sign-up, or onboarding. This captures their immediate experience while it's fresh in their minds. Use tags to differentiate between transaction types.
97201
98-
It's best to customize your prompts for clarity and relevance; this will guide the user to provide useful input. Use friendly language to encourage honest, casual feedback.
99-
100-
101-
## 3. Add Custom Tags to Feedback Submissions For Better Routing
102-
103-
If you have multiple feedback buttons in your application that are embedded into different features, tags are critical in order to enable faster alert routing and triaging for the right teams.
104-
105-
You can auto-apply tags based on the widget’s placement. For example, use a custom tag like `feedback.source:checkout`. This allows for routing in Slack and filtering in dashboards. We recommend you define and standardize tags using a single key, such as `feedback.source`.
106-
107-
108-
## 4. Set Up Alerts to Relevant Channels
109-
Feedback is only useful if seen by the right folks.
110-
111-
You can send User Feedback directly into the appropriate team’s channel—whether you use Slack, Microsoft Teams, or Discord (see [complete list of integrations](/product/alerts/create-alerts/routing-alerts/#integrations)). For example, you can tag feedback `feedback.source:checkout` and always have it go to your `#proj-billing` channel in Slack. With this workflow, engineers see feedback in near-real time and take ownership.
112-
113-
Follow the steps below to set up feedback alerts to relevant channels:
114-
115-
1. Create a [New Alert Rule](https://sentry.io/alerts/new/issue/) in Sentry.
116-
2. Scroll to the "Set conditions" section and set the "IF" filter to `The issue's category is equal to… "Feedback"` and `The event's tags match... [your custom tag]`.
117-
3. In the “THEN” filter, select `Send a [your integration] notification` and then add details of the channel you'd like to send the feedback to. You can also add tags you’d like to see on the feedback alert. For example, `user.email`.
118-
4. Add an alert name and owner.
119-
120-
121-
![](feedback-img/img/feedback-alert-conditions.png)
122-
123-
Once set up, here's what an example alert looks like:
202+
**Customizations for Post-Transaction Feedback:**
203+
- Customize `formTitle` and `messagePlaceholder` to match the transaction ("How was checkout?" vs. "How was sign-up?")
204+
- Set `isEmailRequired: true` for post-transaction feedback so you can follow up on issues
205+
- Use `successMessageText` to reinforce the completed action ("Thanks! Your order is on its way")
206+
- Add `onFormClose` callback to redirect users to a confirmation page or next step
207+
- Match your brand colors with custom CSS variables (`--accent-background`, `--foreground`)
124208
125-
![](feedback-img/img/feedback-example-alert.png)
209+
**Example implementation:**
210+
After a successful checkout, display a subtle feedback prompt asking "How was your checkout experience?" Tag it with `feedback.source:checkout` and `feedback.type:post-transaction` to route it to your billing or checkout team.
126211
127212
128213

0 commit comments

Comments
 (0)