Installation

Check out the steps to install the BetterBugs Feedback widget for your web apps.

PREREQUISITES

Here’s what you need to set up the feedback widget:

1. Workspace-Wide API Key (apiKey)

2. BetterBugs Project ID (projectId)

3. JavaScript application basic setup.

4. BetterBugs Web SDK installation (using simple pkg script OR npm/yarn OR JavaScript frameworks).

How to Generate API key and Project ID for Adding the Feedback Widget to Your Web App?

What do you need the API Key and Project ID for?

• Workspace API Key apiKey : Enables you to scope your workspace with the SDK widget rather than individual projects.

• Project ID projectId: Enables you to route bug reports to the correct project by simply adding a property in the SDK initialization script.

How to Generate API key and Project ID for Installing the Feedback Widget?

Here're the steps for generating your:

• Workspace-Wide API Key

• Project ID

1

Open Workspace Settings

Login to BetterBugs and click on Workspace name at the top left side. Now, click the gear icon to open "Workspace Settings".

2

Open the API Keys tab

Next, click the “API Keys” tab under "Workspace Settings".

3

Generate Workspace-Wide API key

Click "Generate Key" at the top right to get the workspace API key. Use this key as a value for the apiKey property in the initialization script.

4

Get BetterBugs Project ID

From the Initialise the SDK section, use the dropdown to get the projectId for a specific project within BetterBugs.

Example: Initialization Script

import { Betterbugs } from "@betterbugs/web-sdk";

const bb = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
});

Before moving on to the installation part, make sure to copy the API key and the Project ID that you just created. Please keep it handy as you’ll need it to initialize the feedback widget in your JavaScript application.

Okay! You’re all set.

What are the Methods to Install the Feedback Widget for Your Web Apps?

After getting your API key and the Project ID, you can install the feedback in your JavaScript apps using:

• Method 1 — Install the widget using a simple CDN script in your HTML file (Easiest)

• Method 2 — Install the widget with npm or yarn

Installing the Feedback Widget for Popular JavaScript Frameworks/UI Libraries: Practical Examples with Code

You can also install the feedback widget for different JavaScript apps, libraries, and frameworks. We’ve included examples for the following setups:

• React app

• Vue app

• Svelte app

• Electron app