> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation.md).

# Installation

{% hint style="info" %}
**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).
   {% endhint %}

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

{% hint style="warning" icon="lightbulb" %}
**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.
  {% endhint %}

#### 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**

{% stepper %}
{% step %}

#### 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".**
{% endstep %}

{% step %}

#### Open the API Keys tab

Next, click the “**API Keys**” tab under "**Workspace Settings**".
{% endstep %}

{% step %}

#### 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.
{% endstep %}

{% step %}

#### Get BetterBugs Project ID

From the **Initialise the SDK** section, use the dropdown to get the `projectId` for a specific project within BetterBugs. 
{% endstep %}
{% endstepper %}

#### Example: Initialization Script

```javascript
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
});
```

{% hint style="warning" %}
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.
{% endhint %}

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](/developer-guide/betterbugs-web-sdk/installation/start-widget-with-cdn-script.md) (Easiest)
* **Method 2** — [Install the widget with `npm` or `yarn`](/developer-guide/betterbugs-web-sdk/installation/start-widget-with-npm-or-yarn.md)

### 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](/developer-guide/betterbugs-web-sdk/installation/react-app-example.md) 
* [Vue app](/developer-guide/betterbugs-web-sdk/installation/vue-app-example.md) 
* [Svelte app](/developer-guide/betterbugs-web-sdk/installation/svelte-app-example.md) 
* [Electron app](/developer-guide/betterbugs-web-sdk/installation/electron-app-example.md)