> 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/configuration-options.md).

# Configuration Options

{% hint style="info" %}
You can directly add these to the SDK initialization code.
{% endhint %}

### Mandatory Fields

Here are the mandatory properties for the feedback widget.

<table><thead><tr><th width="175.66668701171875">Option</th><th width="139.77783203125">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>apiKey</strong></td><td>string</td><td><p>Workspace API secret. <strong>(Required*)</strong></p><p>Allows you to scope your entire Workspace with the feedback widget.</p></td></tr><tr><td><strong>projectId</strong></td><td>string</td><td><p>Project specific API secret. <strong>(Required*)</strong></p><p>The project to report bugs to. Required with a workspace API key; omit it if you are using a legacy project-scoped key.</p></td></tr></tbody></table>

### Styling Options

Here are the styling options available for the feedback widget.

<table><thead><tr><th width="287.88885498046875">Option</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>position</strong></td><td>{ top? : string, left? : string, right? : string, bottom? : string }</td><td>Control the widget's position on screen</td></tr><tr><td><strong>styles</strong></td><td>{ theme?: 'light' | 'dark', primaryColor?: string, primaryTextColor?: string, secondaryColor?: string, secondaryTextColor?: string, textColor?: string, mutedTextColor?: string, inputBgColor?: string, fontFamily?: string, fontFamilyUrl?: string (optional) }</td><td>Set the styles of the widget</td></tr><tr><td><strong>actionButtonComponent</strong></td><td>React.ReactNode | string</td><td>Component for the action button (React component or HTML string accepted)</td></tr><tr><td><strong>successMessageHeaderText</strong></td><td>string</td><td>Main heading text when the feedback is successfully submitted</td></tr><tr><td><strong>mainHeading</strong></td><td>string</td><td>Main heading text of the widget</td></tr><tr><td><strong>successMessageSubHeaderText</strong></td><td>string</td><td>Sub-heading text when the feedback is successfully submitted</td></tr></tbody></table>

### Other Settings for the Feedback Widget to Control its Behavior

Here are the settings available for the SDK widget to control its behavior programmatically:

<table><thead><tr><th width="253.4444580078125">Option </th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>metaData</strong></td><td>Object literal as {key: value}</td><td>Custom metadata to attach to reports (e.g., { username: "obi wan", plan: "individual", userID: 1234, })</td></tr><tr><td><strong>recordType</strong></td><td>"recordVideo" | "domRecord"</td><td>The "recordVideo" type (recommended for SPAs) is the traditional media recording method for video and audio. It’s set by default.<br>The "domRecord" type (recommended for Multi Page Apps) is the DOM recording method and may not be as accurate as the "recordVideo" type.</td></tr><tr><td><strong>disableScreenshot</strong></td><td>boolean</td><td>Enable/disable screenshot capturing in the widget (by default, its enabled)</td></tr><tr><td><strong>disableRecording</strong></td><td>boolean</td><td>Enable/disable screen recording in the widget (by default, its enabled)</td></tr><tr><td><strong>enableAnnotation</strong></td><td>boolean</td><td>Enable/disable annotation tools for screenshots (by default, its enabled)</td></tr><tr><td><strong>showActionButton</strong></td><td>boolean</td><td>Display/hide the floating action button (widget button)</td></tr><tr><td><strong>email</strong></td><td>string</td><td><p>Set the user's email address who is reporting the bug. </p><p>Works only in "production" mode.</p></td></tr><tr><td><strong>maxRecordingMinutes</strong></td><td>number</td><td><p>Set the maximum screen recording length in minutes. </p><p>By default, it's set to 15 mins.</p></td></tr><tr><td><strong>emailFieldLabel</strong></td><td>string</td><td>Set label of email field</td></tr><tr><td><strong>emailFieldPlaceholder</strong></td><td>string</td><td>Set placeholder of email field</td></tr><tr><td><strong>titleFieldLabel</strong></td><td>string</td><td>Set label of title field</td></tr><tr><td><strong>titleFieldPlaceholder</strong></td><td>string</td><td>Set placeholder of title field</td></tr><tr><td><strong>descriptionFieldLabel</strong></td><td>string</td><td>Set label of description field</td></tr><tr><td><strong>descriptionFieldPlaceholder</strong></td><td>string</td><td>Set placeholder of description field</td></tr></tbody></table>

### Example Code Snippet

Here’s the code with some examples to apply styling and other options for the feedback widget:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- PKG Loading Script: Put this in the HTML head tag -->
    <script src="https://pkg.betterbugs.io/scripts/latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      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
            
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
            successMessageHeaderText: "Thank you! 🙏🏻",
            successMessageSubHeaderText: "Your feedback is submitted.",
            metaData: { username: "obi wan", plan: "individual", userID: 1234 },
            email: "obi@example.com",
          });
        }
      };
      startBB();
    </script>
    <title>BetterBugs Web SDK Widget | JavaScript + PKG</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + PKG</h2>
    <p>The button 👇🏻 will throw a random error in console</p>
    <button class="btn">Click here</button>
    <p>BetterBugs catches the error</p>

    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error(`Random Error: ${Math.trunc(Math.random() * 10) + 1}`);
      });
    </script>
  </body>
</html>
```