You can customize the User Bug Report button to appear however you would like on your website. In fact the entire 'interior' of the button can be any markup you like.
There are two things to think about in customizing:
- The Button -- how a user launches a bug report
- The Tool -- where the user inputs their bug report
Customizing the button is relatively easy.
<BugButton/> react component, will draw its own user interface if empty -- and anything you put in as children will take over. Simple -- just wrap
<BugButton>...</BugButton> around your beautiful UI.
For more detailed information on the
BugButton, see the component documentation.
Complete override of the theme is provided by Material UI, documented here https://material-ui.com/customization/theming/. Using these widely known, and easily customized components can let you change many aspects of the User Bug Report dialog and UI, including the use of off the shelf MUI themes, such as https://react-theming.github.io/create-mui-theme/
Here is a simple example, setting a color changing theme. Click the button and see the result.
You can further control the styles of pins & notes.