Installation

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

PREREQUISITES

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

1. API key from the BetterBugs project.

2. JavaScript application basic setup

3. BetterBugs Web SDK installation (using CDN script OR npm/yarn OR JavaScript frameworks).

How to generate an API key for integrating the BetterBugs Web SDK Widget

What do you need the API key for?

The API key connects your web app to a BetterBugs project.

When a user sends a bug report using the SDK widget, the API/secret key would make sure the report goes to the right project (the one you set up in BetterBugs).

NOTE: The generated key would belong to a specific project in your BetterBugs Workspace (and not your whole workspace).

Here’s how to generate an API key for your BetterBugs project:

1

Open Project Settings

Log in to your BetterBugs dashboard and open a Project (within a Workspace). To open Project Settings, click on the gear icon at the top just beside your project name. Alternatively, you can hover over the Project name in the left sidebar and click the three dots (•••) to open Project Settings.

2

Open the Web SDK tab

Next, click the “Web SDK” tab within Project Settings.

3

Generate API key

Scroll down to Step 2: Initialize the SDK section. There, you’ll find the “Generate API Key” option. Click on it to create a new API key. Okay! You’re all set with your secret key.

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

Methods to install the SDK widget in your web apps

After getting your API key, you can install the SDK in your JavaScript apps using:

• Method 1 — Install the widget with CDN Script

• Method 2 — Install the widget with npm or yarn

Installing the Web SDK widget for different JavaScript frameworks

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

• React app

• Vue app

• Svelte app

• Electron app