Configure User Feedback

User Feedback Widget

The User Feedback Widget offers many customization options, and if the available options are insufficient, you can use your own UI.

General

The following options can be configured for the integration in SentryUserFeedbackConfiguration:

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:

onSubmitSuccess provides a dictionary with the following keys:

• message: The message the user entered in the feedback form.
• name: The name the user entered in the feedback form.
• email: The email the user entered in the feedback form.
• attachments: An array of attachments to be included with the feedback; currently only one screenshot is supported.

Example:

SentrySDK.start { options in 
    options.showFormForScreenshots = true
    options.configureUserFeedback { config in
        config.onSubmitSuccess = { data in
            print("Feedback submitted successfully from \(data["name"]) at \(data["email"]): \(data["message"])")
        }
    }
}

Widget

The following options can be configured for the integration in SentryUserFeedbackWidgetConfiguration:

Form Configuration

You can customize which form elements are shown, whether they are required, and even prefill some info, in SentryUserFeedbackFormConfiguration:

Example:

SentrySDK.start { options in 
    options.configureUserFeedback { config in
        config.configureForm { form in
            form.isRequiredText = "*"
            form.title = "We want to hear from you!"
            form.useSentryUser = false
        }
    }
}

Theme Customization

Colors can be customized via the top-level config object, configuring for both light and dark themes.

Form element outlines can be configured via the outlineStyle property. By default, the color is rgb(204, 204, 204), the width is 0.5, and the corner radius is 5.0.

Fonts can be directly customized, but by default they will scale with the user's preferred text size using predefined font styles:

You can still configure the fontFamily setting and we will request an appropriately scaled font from the system.

Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration:

SentrySDK.start { options in 
    options.configureUserFeedback { config in
        // configureTheme is used for light themes on iOS versions that support dark mode, and as the sole theme configuration for earlier iOS versions that don't support dark mode
        config.theme { theme in 
            theme.background = .init(color: .yellow)
        }
        config.darkTheme { theme in 
            theme.background = .init(color: .darkGray)
        }
    }
}

Accessibility

The Feedback widget is designed to be accessible, with a set of default accessibility labels that can be overriden. The following attributes are set to ensure the widget is accessible:

SentryUserFeedbackWidgetConfiguration

SentryUserFeedbackFormConfiguration

Example:

SentrySDK.start { options in 
    options.configureUserFeedback { config in
        config.configureWidget { widget in
            widget.widgetAccessibilityLabel = "Report an Issue" // default: "Report a Bug"
        }
        config.configureForm { form in
            form.messageTextViewAccessibilityLabel = "What happened?" // default: "What's the bug? What did you expect?"
        }
    }
}

Bring Your Own Widget

You can also use your own UI components to gather feedback and pass the feedback data object to the SentrySDK.capture(feedback: SentryFeedback) function.

SentrySDK.capture(feedback: .init(
    message: "This is an example feedback", // required
    name: "Jane Doe", // optional
    email: "email@example.org", // optional
    source: .custom,
    screenshot: somePngImageData // optional
));