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 to Your Web App?

What do you need the API key for?

The API key authenticates the SDK with your web app. Note that the API key is specific to a BetterBugs project.

So, 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).

IMPORTANT NOTE

• The generated key would belong to a specific project in your BetterBugs Workspace (and not your whole workspace). So, after installation, all the bug reports created through the the feedback widget saves automatically to the same project.

• If you've multiple web apps that you need the SDK widgets on, you'd have to set them up separately for each web app (using a new API key + a BetterBugs Project).

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

How to Generate API Key for Integrating Web SDK Widget to Your Web App | Video Demo

1

Open Workspace Settings

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

2

Open the Web SDK tab

Next, click the “Web SDK” tab under "Workspace Settings".

3

Generate API key and Select a Project

Click "Generate Key" and select a BetterBugs Project to generate the API key for.

4

Continue and Confirm Action

Hit "Continue" and confirm the action.

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.

Okay! You’re all set with your secret key.

What are the Methods to Install the SDK Widget for 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 Popular JavaScript Frameworks/UI Libraries: Practical Examples with Code

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