Start widget with CDN Script

Quick installation guide to start the BetterBugs Web SDK widget with a CDN script.

PREREQUISITES

Here’s what you need to set up the SDK widget:

Basic web app setup (HTML/CSS + JavaScript)
API key from the BetterBugs project to manage submitted bug reports.

Here are the steps for it:

Generate API key

Log in to your BetterBugs.io dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

Steps for generating API key

Add CDN script to the HTML head tag in your app

Open your application’s HTML index file. In the head tag, add the following CDN script:

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

Initialize the SDK (with default UI)

In your JavaScript script file, add the following code snippet to initialize the SDK widget. Make sure to add your project API key in the function:

const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      // Replace with your BetterBugs Project API key
      apiKey: "YOUR-API-KEY-GOES-HERE",
    });
  }
};

startBB();

You can customize the SDK with your brand colors and design from the initialization function:

const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      // Replace with your BetterBugs Project API key
      apiKey: "YOUR-API-KEY-GOES-HERE",
      position: { top: "20px", right: "20px" },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
    });
  }
};
startBB();

Test the setup

Now, try running the application on your local server. The Web SDK widget should be available at the bottom right side of your app screen (with the default styles).

Example Code in the Video Demo (Along with Customization)

Here’s the complete code to start the Web SDK widget in just one HTML file:

<!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",
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
          });
        }
      };
      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>

PreviousInstallation NextStart widget with npm or yarn

Last updated 1 month ago

<!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",
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
          });
        }
      };
      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>