> 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/using-web-sdk.md).

# Using Web SDK

Once you’re good with the installation part, you can start using the widget in your app to get bug reports or feedback from the end users. 

{% hint style="warning" icon="lightbulb" %}
Before you start using it, note that the widget comes with two modes:

* **Development mode**
* **Production mode**
  {% endhint %}

### What is the difference between the production and development modes in the Web SDK widget?

#### **1 - Development mode (set as default) — For internal teams (QA, Devs, Managers, Stakeholders)**

The development mode allows you to configure your SDK for bug reporting purposes for internal team usage. It’s perfect for sharing bug reports among the QA, developers, project managers, or stakeholders in the development or testing phases. 

You can easily configure the SDK to run in the “**development**” mode from the initialization snippet by setting the “**mode**” property to “**development**”.

{% hint style="success" %}
**NOTE**: This is an optional setting. Even if you skip adding this to your initialization code, it will run in the “**development**” mode by default. However, adding this makes your code easier to read and understand for your co-developers.
{% endhint %}

Here’s what the initialization code snippet looks like:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FnsYrXIixDCRBLvrVuzxL%2F03-Setting-Development-Mode-in-Web-SDK.mp4?alt=media&token=cd6b6bb5-90a3-4c58-89bf-686ab3368ea3>" %}
Setting up **mode: "development"** in the BetterBugs Web SDK Widget | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "development", // Adding this key: value is optional
    });
  }
};
startBB();
```

<a href="/pages/rcFbqd2ZdRQJ6h2pft7P" class="button primary">Using the Web SDK Widget in Development Mode | Quick Guide</a>

#### 2 - Production mode — For end users and customers

The production mode works perfectly for a live app. Use this mode to collect feedback or bug reports in the production environment.&#x20;

You can set the SDK to run in the “**production**” mode from the initialization snippet by setting the “**mode**” property to “**production**”.

{% hint style="warning" %}
NOTE: You need to explicitly set this mode to run the widget in the “**production**” environment.
{% endhint %}

Here’s what the initialization code snippet looks like:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FVRd2ng3P1n0nbsviGZXy%2F04-Setting-Production-Mode-in-Web-SDK.mp4?alt=media&token=f50fbb69-5508-4b91-aea9-99d62f7e0c9c>" %}
Setting up **mode: "production"** in the BetterBugs Web SDK Widget | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "production", 
    });
  }
};
startBB();
```

<a href="/pages/wyqBTiHzfAXlTUfOGt70" class="button primary">Using the Web SDK Widget in Production Mode | Quick Guide</a>