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

<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" icon="lightbulb" %}
**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:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FnCshDfhXbDp92v4Qu9lz%2F01-Generate-API-KEY-for-Installing-Web-SDK.mp4?alt=media&token=ea8fa842-7c0e-40e3-824d-d1adffd40e24>" %}
How to Generate API Key for Integrating Web SDK Widget to Your Web App | Video Demo&#x20;
{% endembed %}

{% 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.

### 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](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 Popular JavaScript Frameworks/UI Libraries:  Practical Examples with Code&#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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.