> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/start-widget-with-cdn-script.md).
# Start widget with CDN Script
{% hint style="info" icon="lightbulb" %}
**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 API key.
{% endhint %}
### How to Install the BetterBugs Feedback Widget using a CDN Script
Here are the steps for it:
{% stepper %}
{% step %}
#### 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**](/developer-guide/betterbugs-web-sdk/installation.md)
{% endstep %}
{% step %}
#### 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
```
{% endstep %}
{% step %}
#### 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**:
```javascript
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();
```
{% endstep %}
{% step %}
#### Customize the Widget UI (Optional)
You can customize the widget with your brand colors and design from the initialization function:
```javascript
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();
```
{% endstep %}
{% step %}
#### 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).
{% endstep %}
{% endstepper %}
### Example Code in the Video Demo (Along with Customization)
Here’s the complete code to start the feedback widget in just one HTML file:
```html
BetterBugs Web SDK Widget | JavaScript + CDN Script
BetterBugs Web SDK Widget | JavaScript + CDN Script
The button 👇🏻 will throw a random error in console