Customizing

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

The Button

Customizing the button is relatively easy.

Customizing React

The <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.

import { BugButton } from "@userbugreport/bugbutton-react";
<BugButton apiKey="sample">
<div style={{ padding: "12px 20px", border: "1px solid green" }}>
📍🦟 Click Me, this documentation is interactive!
</div>
</BugButton>;
The fallback content to display on prerendering

For more detailed information on the BugButton, see the component documentation.

Themes

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.

import { BugButton } from "@userbugreport/bugbutton-react";
<BugButton
theme={{
palette: {
primary: { main: "#2196f3" },
secondary: { main: "#607d8b" },
},
}}
pinStyle={{ color: "#2196f3" }}
noteStyle={{ backgroundColor: "#fffde7" }}
apiKey="sample"
></BugButton>;
The fallback content to display on prerendering