Getting Started

Let's Get Started

Three steps to getting started, here is the overview:

  • Configure an Integration on userbugreport.com
  • Paste in the User Bug Report code in your site.
  • Collect a Bug 🐛

React Integration

For this intro, we'll assume you have GitHub. We allow integrating bug reports into public GitHub repositories for free, so this is a great way to get started without any cost.

First off -- sign in -- you'll get a list of social providers. You can pick any one you like, but do know you will need a GitHub account to complete the tutorial.

You'll see the dashboard:

userbugreport.com docs dashboard

Click -- Add a new project.

userbugreport.com docs projects

Click the tile for GitHub.

You will be prompted to grant permission, and will need to say yes.

userbugreport.com docs permissions

Next you will be shown the picker. Start typing and autocomplete to pick any repository that you have permissions to create issues.

userbugreport.com docs pick repository github

Now your repository will appear in a tile, give it a click:

userbugreport.com docs selected repository

You will see:

  • A description of your repository
  • An option to disable the integration
  • Your ID, and API Key, and a button to generate a replacement key
  • The User Bug Report button code snippetuserbugreport.com docs

Surprise -- that's it! Now let's use the button and make a bug report! We'll go ahead and use Create React App, it's fairly popular and folks can relate to it. I'll just run through this with npm, but yarn works just fine too.

Start off with:

npx create-react-app cra-example

Start it and see the classic, Create React App default.

npm start
userbugreport.com docs create react app

OK -- now add the User Bug Report button:

npm install --save @userbugreport/bugbutton-react

And paste in the code from the portal:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BugButton } from "@userbugreport/bugbutton-react";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<BugButton
id="ebb492f2-44cc-44ea-ba92-890ada86d260"
apikey="31b81542-f981-452d-97e8-3207a9e15efb"
/>
</header>
</div>
);
}
export default App;

Go ahead and click the User Bug Report button now -- it's working, and you can submit your first bug to your repository!

userbugreport.com create react app complete

And that's it to get up and running. You can learn more about how to customize as well as all the props you can set on the button in the component reference

Install via CDN

Visit your integration page. Click on the the Javascript tab. Then, copy the code--<script> tags and all!-- and paste that code on your website before the closing </body> tag..

<script>
window.userbugreport = {
"id": "ebb492f2-44cc-44ea-ba92-890ada86d260",
"apikey": "31b81542-f981-452d-97e8-3207a9e15efb",
"ubr_script": "https://unpkg.com/@userbugreport/bugbutton-react/dist/browser/index.js"
};
!function(t,e,n){function o(){var t,o=e.getElementsByTagName(n)[0];!function(a,r,d){e.getElementById(r)||((t=e.createElement(n)).src=a,t.id=r,o.parentNode.insertBefore(t,o),"function"==typeof d&&(t.onload=d.call(this,r),t.onreadystatechange=function(t){"complete"!==this.readyState&&"loaded"!==this.readyState||d.call(this,t)}))}(window.userbugreport.ubr_script,"ubrsdk",(function(t){var e=setInterval((function(){window.showBugButton&&(clearInterval(e),window.showBugButton(window.userbugreport))}),100)}))}t.addEventListener?t.addEventListener("load",o):t.attachEvent&&t.attachEvent("onload",o)}(window,document,"script");
</script>