# Configuration options

### Apply visual changes for the SDK widget + tweak settings to control SDK behavior

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

### Styling options for visual changes

Here are the styling options available for the SDK widget.

<table><thead><tr><th width="266.77777099609375">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; }</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>successMessageSubHeaderText</strong></td><td>string</td><td>Sub-heading text when the feedback is successfully submitted</td></tr></tbody></table>

### Other settings for the SDK widget to tweak its behavior

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

| Option                          | Type                           | Description                                                                                                                                                                                                                                                                                                                                       |
| ------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **apiKey**                      | string                         | <p>Project specific API secret. <strong>(Required\*)</strong></p><p>Allows you to connect the widget to a specific project within BetterBugs</p>                                                                                                                                                                                                  |
| **metaData**                    | Object literal as {key: value} | Custom metadata to attach to reports (e.g., { username: "obi wan", plan: "individual", userID: 1234, })                                                                                                                                                                                                                                           |
| **recordType**                  | "recordVideo" \| "domRecord"   | <p>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.</p>                                                              |
| **disableScreenshot**           | boolean                        | Enable/disable screenshot capturing in the widget (by default, its enabled)                                                                                                                                                                                                                                                                       |
| **disableRecording**            | boolean                        | Enable/disable screen recording in the widget (by default, its enabled)                                                                                                                                                                                                                                                                           |
| **enableAnnotation**            | boolean                        | Enable/disable annotation tools for screenshots (by default, its enabled)                                                                                                                                                                                                                                                                         |
| **showActionButton**            | boolean                        | Display/hide the floating action button (widget button)                                                                                                                                                                                                                                                                                           |
| **mode**                        | "development" \| "production"  | <p>Set development or production mode. </p><p>The "development" mode can be set during development/ testing/staging, alpha testing, beta testing, bug bashes, and for QA overall. It’s set as default.</p><p>The "production" mode is for end-users, meaning the app's customers can report a bug or submit feedback in the live environment.</p> |
| **email**                       | string                         | <p>Set the user's email address who is reporting the bug. </p><p>Works only in "production" mode.</p>                                                                                                                                                                                                                                             |
| **maxRecordingMinutes**         | number                         | <p>Set the maximum screen recording length in minutes. </p><p>By default, it's set to 10 mins. Max mins allowed: 15 mins</p>                                                                                                                                                                                                                      |
| **emailFieldLabel**             | string                         | Set label of email field                                                                                                                                                                                                                                                                                                                          |
| **emailFieldPlaceholder**       | string                         | Set placeholder of email field                                                                                                                                                                                                                                                                                                                    |
| **titleFieldLabel**             | string                         | Set label of title field                                                                                                                                                                                                                                                                                                                          |
| **titleFieldPlaceholder**       | string                         | Set placeholder of title field                                                                                                                                                                                                                                                                                                                    |
| **descriptionFieldLabel**       | string                         | Set label of description field                                                                                                                                                                                                                                                                                                                    |
| **descriptionFieldPlaceholder** | string                         | Set placeholder of description field                                                                                                                                                                                                                                                                                                              |

### Example code snippet

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

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

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

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            // Replace with your BetterBugs Project API key
            apiKey: "YOUR-API-KEY-GOES-HERE",
            mode: "production",
            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 + CDN</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN</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>
```


---

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