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