Start widget with CDN Script
Quick installation guide to start the BetterBugs Web SDK widget with a CDN script.
How to install the BetterBugs Web SDK widget using a CDN Script
Here are the steps for it:
1
Generate an API key from Project Settings
Log in to your BetterBugs dashboard and generate an API key from Project Settings. You’ll need it to initialize the SDK in the following steps.
2
3
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();
4
Customize the SDK widget UI (Optional)
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();
Example code
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.jsdelivr.net/npm/@betterbugs/web-sdk@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>
Last updated
Was this helpful?