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


---

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