# Installation

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

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

<details>

<summary>What do you need the API key for?</summary>

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

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).&#x20;

</details>

{% hint style="warning" %}
**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.&#x20;
* 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).
  {% endhint %}

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

{% stepper %}
{% step %}

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

{% step %}

#### Open the Web SDK tab

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

{% step %}

#### Generate API key and Select a Project

Click "**Generate Key**" and select a BetterBugs Project to generate the API key for.
{% endstep %}

{% step %}

#### Continue and Confirm Action

Hit "**Continue**" and confirm the action.
{% endstep %}
{% endstepper %}

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

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

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

### Installing the Web SDK widget for different JavaScript frameworks&#x20;

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

* [React app](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/react-app-example)&#x20;
* [Vue app](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/vue-app-example)&#x20;
* [Svelte app](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/svelte-app-example)&#x20;
* [Electron app](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/electron-app-example)