CSS Request for feedback UI customization

[pdeva03]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

8.34.0

Framework Version

vue 3.5.2

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

I am creating custom feedback UI with css changes. But i couldn't find any variables to change for the below items

1. How to change header font-size and font-family?
2. How to hide sentry icon on the right side?
3. How to change the font-size and color of labels?(Email, Name, Description etc)
4. How to change the font-size of buttons?

Expected Result

Expected to change css customization on above items

Actual Result

Not able to change it with current variables

[Lms24]

Hi @pdeva03 thanks for writing in! Have you checked the feedback widget customization docs?

You can also create your own widget by the way.

I've assigned this issue to the feedback team to investigate further for the specific element styles.

[pdeva03]

@Lms24 We want to reuse existng Sentry widget just want to change font-size, font-family etc.

[ryan953]

Hey @pdeva03, the customization methods we offer are all listed here: https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/configuration/ and see specifically the "CSS Customization" section.

You were asking about:

How to hide sentry icon on the right side?

There is an option called showBranding(https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/configuration/#general) which will hide the logo. Pass this in when you initialize the Sentry SDK.

As far as changing font-size, font-family and colors:

How to change header font-size and font-family?
How to change the font-size and color of labels?(Email, Name, Description etc)
How to change the font-size of buttons?

You can set --font-family and --font-size css variables within a css selector for #sentry-feedback { ... } in your global stylesheet to override those values. Similarly you can set the css variable --foreground to change the form <label> colors. The font-size that the title element uses comes from browser defaults for an <h2>, it's set to 1.5em and therefore related to the base font-size, but not set explicitly.

So in order to override the css variables you can try to copy this into your html and set values to better suite your site:

<style>
#sentry-feedback {
  --font-family: system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-size: 14px;
  --foreground: #2b2233;
}
</style>

I hope this helps!