Skip to content

Commit c37cae0

Browse files
stefanosianostefanosiano
committed
added new User Feedback API instructions
added new User Feedback Widget configuration options
1 parent 5d9101e commit c37cae0

File tree

2 files changed

+287
-5
lines changed

2 files changed

+287
-5
lines changed

‎docs/platforms/android/user-feedback/configuration/index.mdx‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
---
2+
title: Configure User Feedback
3+
sidebar_order: 6900
4+
description: "Learn about general User Feedback configuration fields."
5+
---
6+
7+
## User Feedback Widget
8+
9+
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](#bring-your-own-widget).
10+
11+
### General
12+
13+
Some hooks are available so you can react to the user opening and closing the form, when the user successfully submits the form or when there is an error:
14+
15+
| Hook | Type | Description |
16+
| ----------------- | ------------------------- | ------------------------------------------------------------------------ |
17+
| `onFormOpen` | `() -> Void` | Called when the feedback form is opened. |
18+
| `onFormClose` | `() -> Void` | Called when the feedback form is closed. |
19+
| `onSubmitSuccess` | `(Feedback) -> Void` | Called when feedback is successfully submitted via the prepared form. |
20+
| `onSubmitError` | `(Feedback) -> Void` | Called when there is an error submitting feedback via the prepared form. |
21+
22+
`onSubmitSuccess` and `onSubmitError` forward the feedback object that was submitted, which contains the following properties:
23+
24+
- `message`: The message the user entered in the feedback form.
25+
- `name`: The name the user entered in the feedback form.
26+
- `contactEmail`: The email the user entered in the feedback form.
27+
28+
Example:
29+
30+
```java
31+
SentryAndroid.init(context, options -> {
32+
options.getFeedbackOptions().setOnFormOpen(() -> System.out.println("Form opened"));
33+
options.getFeedbackOptions().setOnFormClose(() -> System.out.println("Form closed"));
34+
options.getFeedbackOptions().setOnSubmitSuccess((feedback) -> System.out.println("Feedback submitted successfully: " + feedback.toString()));
35+
options.getFeedbackOptions().setOnSubmitError((feedback) -> System.out.println("Failed to submit feedback: " + feedback.toString()));
36+
});
37+
```
38+
```kotlin
39+
SentryAndroid.init(this) { options ->
40+
options.feedbackOptions.onFormOpen = Runnable { println("Form opened") }
41+
options.feedbackOptions.onFormClose = Runnable { println("Form closed") }
42+
options.feedbackOptions.onSubmitSuccess = SentryFeedbackOptions.SentryFeedbackCallback {
43+
println("Feedback submitted successfully: $it")
44+
}
45+
options.feedbackOptions.onSubmitError = SentryFeedbackOptions.SentryFeedbackCallback {
46+
println("Failed to submit feedback: $it")
47+
}
48+
}
49+
```
50+
51+
### Form Configuration
52+
53+
You can customize which form elements are shown, whether they are required, and even prefill some info, in `SentryOptions.SentryFeedbackOptions`:
54+
55+
| Option | Type | Default | Description |
56+
| ----------------------------- | -------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
57+
| `showBranding` | `Bool` | `true` | Displays the Sentry logo inside the form |
58+
| `isNameRequired` | `Bool` | `false` | Requires the name field on the feedback form to be filled in. |
59+
| `showName` | `Bool` | `true` | Displays the name field on the feedback form. Ignored if `isNameRequired` is `true`. |
60+
| `isEmailRequired` | `Bool` | `false` | Requires the email field on the feedback form to be filled in. |
61+
| `showEmail` | `Bool` | `true` | Displays the email field on the feedback form. Ignored if `isEmailRequired` is `true`. |
62+
| `useSentryUser` | `Bool` | `true` | Sets the `email` and `name` fields to the corresponding Sentry SDK user fields that were called with `SentrySDK.setUser`. |
63+
64+
Example:
65+
66+
```xml {filename:AndroidManifest.xml}
67+
<application>
68+
<meta-data android:name="io.sentry.feedback.is-name-required" android:value="true" />
69+
<meta-data android:name="io.sentry.feedback.show-name" android:value="false" />
70+
<meta-data android:name="io.sentry.feedback.is-email-required" android:value="false" />
71+
<meta-data android:name="io.sentry.feedback.show-email" android:value="false" />
72+
<meta-data android:name="io.sentry.feedback.use-sentry-user" android:value="false" />
73+
<meta-data android:name="io.sentry.feedback.show-branding" android:value="false" />
74+
</application>
75+
```
76+
```java
77+
SentryAndroid.init(context, options -> {
78+
options.getFeedbackOptions().setNameRequired(true);
79+
options.getFeedbackOptions().setShowName(false);
80+
options.getFeedbackOptions().setEmailRequired(true);
81+
options.getFeedbackOptions().setShowEmail(false);
82+
options.getFeedbackOptions().setUseSentryUser(false);
83+
options.getFeedbackOptions().setShowBranding(false);
84+
});
85+
```
86+
```kotlin
87+
SentryAndroid.init(this) { options ->
88+
options.feedbackOptions.isNameRequired = true
89+
options.feedbackOptions.isShowName = false
90+
options.feedbackOptions.isEmailRequired = true
91+
options.feedbackOptions.isShowEmail = false
92+
options.feedbackOptions.isUseSentryUser = false
93+
options.feedbackOptions.isShowBranding = false
94+
}
95+
```
96+
97+
### Form Labels Configuration
98+
99+
You can customize tha labels and placeholders used in the form.
100+
Note: manifest options are not supported here, due to internationalization:
101+
102+
| Option | Type | Default | Description |
103+
| ----------------------------- | -------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
104+
| `formTitle` | `String` | `"Report a Bug"` | The title of the feedback form. |
105+
| `messageLabel` | `String` | `"Description"` | The label of the feedback description input field. |
106+
| `messagePlaceholder` | `String` | `"What's the bug? What did you expect?"` | The placeholder in the feedback description input field. |
107+
| `isRequiredLabel` | `String` | `" (Required)"` | The text to attach to the title label for a required field. |
108+
| `successMessageText` | `String` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. |
109+
| `nameLabel` | `String` | `"Name"` | The label next to the name input field. |
110+
| `namePlaceholder` | `String` | `"Your Name"` | The placeholder in the name input field. |
111+
| `emailLabel` | `String` | `"Email"` | The label next to the email input field. |
112+
| `emailPlaceholder` | `String` | `"[email protected]"` | The placeholder in the email input field. |
113+
| `submitButtonLabel` | `String` | `"Send Bug Report"` | The label of the submit button. |
114+
| `cancelButtonLabel` | `String` | `"Cancel"` | The label of the cancel button. |
115+
116+
Example:
117+
118+
```java
119+
SentryAndroid.init(context, options -> {
120+
options.getFeedbackOptions().setFormTitle("We want to hear from you!");
121+
options.getFeedbackOptions().setMessageLabel("Feedback");
122+
options.getFeedbackOptions().setMessagePlaceholder("Type your feedback");
123+
options.getFeedbackOptions().setIsRequiredLabel(" *");
124+
options.getFeedbackOptions().setSuccessMessageText("Thanks for the feedback!");
125+
options.getFeedbackOptions().setNameLabel("Full Name");
126+
options.getFeedbackOptions().setNamePlaceholder("Type your full namc");
127+
options.getFeedbackOptions().setEmailLabel("Email Address");
128+
options.getFeedbackOptions().setEmailPlaceholder("Type your email");
129+
options.getFeedbackOptions().setSubmitButtonLabel("Submit");
130+
options.getFeedbackOptions().setCancelButtonLabel("Back");
131+
});
132+
```
133+
```kotlin
134+
SentryAndroid.init(this) { options ->
135+
options.feedbackOptions.formTitle = "We want to hear from you!"
136+
options.feedbackOptions.messageLabel = "Feedback"
137+
options.feedbackOptions.messagePlaceholder = "Type your feedback"
138+
options.feedbackOptions.isRequiredLabel = " *"
139+
options.feedbackOptions.successMessageText = "Thanks for the feedback!"
140+
options.feedbackOptions.nameLabel = "Full Name"
141+
options.feedbackOptions.namePlaceholder = "Type your full namc"
142+
options.feedbackOptions.emailLabel = "Email Address"
143+
options.feedbackOptions.emailPlaceholder = "Type your email"
144+
options.feedbackOptions.submitButtonLabel = "Submit"
145+
options.feedbackOptions.cancelButtonLabel = "Back"
146+
}
147+
```
148+
149+
### Theme Customization
150+
151+
The User Feedback form integrates with the app theme by default, and can be customized with a custom xml style.
152+
Here are the attributes used by the form:
153+
154+
| Android style attribute | Description |
155+
| --------------------------------- | ----------------------------------------------------------- |
156+
| `android:windowTitleStyle` | Style of the feedback dialog title |
157+
| `android:textColor` | Color of title, cancel button text, and non-editable texts. |
158+
| `android:editTextColor` | Color of editable texts. |
159+
| `android:textColorHint` | Color of the hint of editable texts. |
160+
| `android:textColorPrimaryInverse` | Color of the send button text. |
161+
| `android:colorPrimary` | Background color of the send button. |
162+
| `android:colorBackground` | Background color of the cancel button. |
163+
| `android:colorForeground` | Color tint of the image logo. |
164+
165+
The theme used by the form is the one set in the application theme as the `android:dialogTheme`.
166+
Since the SentryUserFeedbackDialog extends AlertDialog, a custom theme can be also set when instantiating it:
167+
168+
```java
169+
SentryUserFeedbackDialog dialog = new SentryUserFeedbackDialog(context, R.style.MyAppDialogTheme);
170+
```
171+
```kotlin
172+
val dialog = SentryUserFeedbackDialog(context, R.style.MyAppDialogTheme)
173+
```
174+
175+
Here is an example of how the feedback form can be customized:
176+
177+
```styles.xml or themes.xml
178+
<!-- Application theme. -->
179+
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
180+
<!-- ... Current theme customizations ... -->
181+
182+
<!-- Set a dialog theme if not already done. -->
183+
<item name="android:dialogTheme">@style/MyAppDialogTheme</item>
184+
</style>
185+
186+
<!-- Edit application dialog theme. -->
187+
<style name="MyAppDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog">
188+
<!-- Set the style of the feedback dialog title. -->
189+
<item name="android:windowTitleStyle">@style/FeedbackFormTitleStyle</item>
190+
191+
<!-- Set the color of title, cancel button text, and non editable texts. -->
192+
<item name="android:textColor">@color/colorPrimary</item>
193+
<!-- Set the color of editable texts. -->
194+
<item name="android:editTextColor">@color/colorPrimaryDark</item>
195+
<!-- Set the color of the hint of editable texts. -->
196+
<item name="android:textColorHint">@color/colorPrimaryDark</item>
197+
<!-- Set the color of the send button text. -->
198+
<item name="android:textColorPrimaryInverse">@android:color/white</item>
199+
200+
<!-- Set the background color of the send button. -->
201+
<item name="android:colorPrimary">@color/colorPrimary</item>
202+
<!-- Set the background color of the cancel button. -->
203+
<item name="android:colorBackground">@android:color/black</item>
204+
<!-- Set the color tint of the image logo. -->
205+
<item name="android:colorForeground">@color/colorPrimary</item>
206+
</style>
207+
208+
<style name="FeedbackFormTitleStyle">
209+
<!-- Customize your theme here. -->
210+
<item name="android:textAppearance">@style/TextAppearance.AppCompat.Title</item>
211+
</style>
212+
```
213+
214+
### Bring Your Own Widget
215+
216+
You can also use your own UI components to gather feedback and pass the feedback data object to the `Sentry.captureFeedback(Feedback)` function.
217+
218+
```java
219+
import io.sentry.Sentry;
220+
import io.sentry.protocol.Feedback;
221+
222+
Feedback feedback = new Feedback("I encountered a bug while using the app.");
223+
feedback.setName("John Doe");
224+
feedback.setContactEmail("[email protected]");
225+
Sentry.captureFeedback(feedback);
226+
```
227+
```kotlin
228+
import io.sentry.Sentry
229+
import io.sentry.protocol.Feedback
230+
231+
val feedback = Feedback("I encountered a bug while using the app.")
232+
feedback.name = "John Doe"
233+
feedback.contactEmail = "[email protected]"
234+
Sentry.captureFeedback(feedback)
235+
```

‎docs/platforms/android/user-feedback/index.mdx‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,63 @@
11
---
22
title: Set Up User Feedback
33
sidebar_title: User Feedback
4-
description: "Learn more about collecting user feedback when an event occurs. Sentry pairs the feedback with the original event, giving you additional insight into issues."
4+
description: "Learn how to enable User Feedback in your Android app."
55
sidebar_order: 6000
66
---
77

8-
When a user experiences an error, Sentry provides the ability to collect additional feedback. You can collect feedback according to the method supported by the SDK.
8+
The User Feedback feature allows you to collect user feedback from anywhere inside your application at any time, without needing an error event to occur first.
9+
10+
<Alert>
11+
If you're using a self-hosted Sentry instance, you'll need to be on version 24.4.2 or higher in order to use the full functionality of the User Feedback feature. Lower versions may have limited functionality.
12+
Ensure you are using the Android SDK version 8.13.0 or above of the SDK to access the latest features.
13+
</Alert>
14+
15+
## User Feedback Widget
16+
17+
The User Feedback widget allows users to submit feedback from anywhere inside your application.
18+
19+
### Set Up
20+
21+
To start using the User Feedback widget in your Android application, just start the SDK.
22+
A `SentryUserFeedbackDialog` will be available to be used in your app.
23+
For the configuration options, please refer to the <PlatformLink to="/user-feedback/configuration/">User Feedback Widget Configuration</PlatformLink>[User Feedback Configuration].
24+
25+
```java
26+
import io.sentry.android.core.SentryUserFeedbackDialog;
27+
28+
// Just instantiate the dialog and show it whenever you want
29+
new SentryUserFeedbackDialog(context).show();
30+
```
31+
```kotlin
32+
import io.sentry.android.core.SentryUserFeedbackDialog
33+
34+
// Just instantiate the dialog and show it whenever you want
35+
SentryUserFeedbackDialog(context).show()
36+
```
37+
38+
### Session Replay
39+
40+
The User Feedback widget integrates seamlessly with Session Replay. When the widget is opened, the SDK buffers up to 30 seconds of the user's session. If feedback is submitted, this replay is sent along with the feedback, allowing you to view both the feedback and the user's actions leading up to the feedback submission.
941

1042
## User Feedback API
1143

12-
The user feedback API allows you to collect user feedback while utilizing your own UI. You can use the same programming language you have in your app to send user feedback. In this case, the SDK creates the HTTP request so you don't have to deal with posting data via HTTP.
44+
The User Feedback API allows you to collect user feedback while using your own UI components. You can submit feedback directly using the `Sentry.captureFeedback(Feedback)` method:
45+
46+
```java
47+
import io.sentry.Sentry;
48+
import io.sentry.protocol.Feedback;
1349

14-
Sentry pairs the feedback with the original event, giving you additional insight into issues. Sentry needs the `eventId` to be able to associate the user feedback to the corresponding event. For example, to get the `eventId`, you can use <PlatformLink to="/configuration/options/#before-send"><PlatformIdentifier name="before-send" /></PlatformLink> or the return value of the method capturing an event.
50+
Feedback feedback = new Feedback("I encountered a bug while using the app.");
51+
feedback.setName("John Doe");
52+
feedback.setContactEmail("[email protected]");
53+
Sentry.captureFeedback(feedback);
54+
```
55+
```kotlin
56+
import io.sentry.Sentry
57+
import io.sentry.protocol.Feedback
1558

16-
<PlatformContent includePath="user-feedback/sdk-api-example/" />
59+
val feedback = Feedback("I encountered a bug while using the app.")
60+
feedback.name = "John Doe"
61+
feedback.contactEmail = "[email protected]"
62+
Sentry.captureFeedback(feedback)
63+
```

0 commit comments

Comments
 (0)