> 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-feedback-widget.md).

# Using Feedback Widget

Check out the steps for using the feedback widget in your web apps.

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="info" icon="lightbulb" %}
Before you start using it, note that the widget comes with two modes:

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

### What is the Difference Between the Production and Development Mode in the Feedback widget?

#### 1 - Production mode **(set as default)** — For End Users and Customers in Your Live App

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

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

In this mode, you'll get the following fields in the widget when a user attempts to submit feedback:

* **Email\* (Required)** — Your email ID.
* **Issue Type** — (Optional: General Enquiry | Give Feedback | Report a Bug)
* **Title\* (Required)** —  Bug/Feedback/Enquiry title.
* **Description** — Quick summary, issue repro steps, and additional context.
* **Attachments** (Optional; Up to 3 | To be added by the reporter as the customer/end-user)

{% hint style="info" %}
**NOTE**: This is an OPTIONAL setting. Even if you skip adding this to your initialization code, it will run in the “**production**” mode by default. On the upside, 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%2FGtwYc81om5wdJXKC90t1%2F03-Setting-Production-Mode-in-BetterBugs-Feedback-Widget.mp4?alt=media&token=61b5db05-49b3-4028-ab4c-4a713b0eead3>" %}
How to Setup the Feedback Widget in Production Mode | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
      mode: "production", // OPTIONAL 
    });
  }
};
startBB();
```

<a href="/developer-guide/using-feedback-widget/production-mode.md" class="button primary">How to Use Feedback Widget in Production Mode | Quick Guide</a>

#### **2 - Development mode  — For Internal Teams (QA, Devs, Managers, Stakeholders)**

The development mode allows you to configure your feedback widget 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.&#x20;

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

In this mode, you'll get the following fields in the widget when a user attempts to submit feedback:

* **Issue Type** — (Optional: General Enquiry | Give Feedback | Report a Bug)
* **Title\* (Required)** —  Bug/Feedback/Enquiry title.
* **Description** — Quick summary, issue repro steps, and additional context.
* **Reporter\*** — Add your name as the reporter. It's a required field.
* **Assignee** (**OPTIONAL**) — Select an assignee from the Workspace members
* **Attachments** (**OPTIONAL**; Up to 3 | To be added by the reporter)

{% hint style="warning" %}
**NOTE**: You need to explicitly set this mode to run the widget in the “**development**” 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%2FNoymqZoNxvqia9oVJt56%2F04-Setting-Development-Mode-in-BetterBugs-Feedback-Widget.mp4?alt=media&token=d43648db-b8b1-4b46-973d-5fe1914ff1cf>" %}
How to Setup the Feedback Widget in Development Mode | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
      mode: "development", // Manadatory for running in dev mode
    });
  }
};
startBB();
```

<a href="/developer-guide/using-feedback-widget/development-mode.md" class="button primary">How to Use Feedback Widget in Development Mode | Quick Guide</a>