Start widget with CDN Script

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

PREREQUISITES

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

• Basic web app setup (HTML/CSS + JavaScript)

• Workspace-Wide API Key.

• BetterBugs Project ID.

How to Install the BetterBugs Feedback Widget using a CDN Script

Here are the steps for it:

How to Install the BetterBugs Feedback Widget for Your Web Apps | Video Demo

1

Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

Steps for Generating API Key and Project ID

2

Add CDN Script to the HTML Head Tag in Your Web App

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

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

3

Initialize the Widget (with default UI)

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

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
    });
  }
};

startBB();

4

Customize the Widget UI (Optional)

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

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",
      },
    });
  }
};
startBB();

5

Test the Setup

Now, try running the application on your local server. The feedback 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 feedback 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 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",
            },
          });
        }
      };
      startBB();
    </script>

    <title>BetterBugs Web SDK Widget | JavaScript + CDN Script</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN Script</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>