> 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 SDK widget: * Basic web app setup (HTML/CSS + JavaScript) * API key from the BetterBugs project to manage submitted bug reports. {% endhint %} ### How to install the BetterBugs Web SDK widget using a CDN Script Here are the steps for it: {% embed url="" %} How to Install the BetterBugs Web SDK Widget using a CDN Script | Video Demo {% endembed %} {% stepper %} {% step %} #### 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](/developer-guide/betterbugs-web-sdk/installation.md) {% endstep %} {% step %} #### 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 ``` {% endstep %} {% step %} #### 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**: ```javascript const startBB = function () { if (window.Betterbugs) { new window.Betterbugs({ // Replace with your BetterBugs Project API key apiKey: "YOUR-API-KEY-GOES-HERE", }); } }; startBB(); ``` {% endstep %} {% step %} #### Customize the SDK widget UI (Optional) You can customize the SDK with your brand colors and design from the initialization function: ```javascript 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(); ``` {% endstep %} {% step %} #### 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). {% endstep %} {% endstepper %} ### 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: ```html BetterBugs Web SDK Widget | JavaScript + CDN

BetterBugs Web SDK Widget | JavaScript + CDN

The button 👇🏻 will throw a random error in console

BetterBugs catches the error

``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/start-widget-with-cdn-script.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.