> ## Documentation Index
> Fetch the complete documentation index at: https://docs.symmetry.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart: Embed a widget
> Add a CBS widget to your page with a single script tag.
CBS widgets are the fastest way to add a paycheck calculator to your site. Symmetry hosts and maintains the UI, and you embed it with one script tag.
First, check the [prerequisites](/cbs/getting-started/prerequisites). Not sure widgets are the right path? See [Widgets vs. API](/cbs/overview/choose-path).
## 1. Add the script
Copy this into a page served by your web server, replacing `yourKey` with your key. This example uses the **salary** calculator:
```html theme={null}
```
A minimal test page:
```html theme={null}
Widget example
```
## 2. Verify it renders
Widgets can't run from a `file://` page; they must load over `http(s)://`.
To view your test page:
1. Save the HTML above as `index.html`.
2. Open a terminal, `cd` into the folder that contains `index.html`, and start a local web server with one of these:
* **Python:** `python3 -m http.server 8000`
* **Node:** `npx serve`
3. Open the URL it prints (for example, `http://localhost:8000`) in your browser.
The calculator should render and be ready to accept inputs. By default, it fills the width of its container; to set its size, see [Make a widget responsive](/cbs/widgets/make-responsive).
If the key is missing or invalid, the widget shows an error instead of rendering the calculator (for example, *"Invalid api key"*). Double-check your key. See [Prerequisites](/cbs/getting-started/prerequisites).
## 3. Swap in a different calculator
Change the script filename to any calculator type. For example `hourly.js`, `grossup.js`, or `flatbonus.js`:
```html theme={null}
```
See [Available calculators](/cbs/overview/available-calcs) for the full list.
## Next steps
Every calculator you can embed as a widget.
The model behind every calculation, and what drives the results.
More references:
* [Configure your widget](/cbs/widgets/configuration-methods)
* [Object model and default properties](/cbs/api/object-model)
* [Widget catalog](/cbs/widgets/catalog)
* [Customize styling](/cbs/widgets/customize-styling)
* [Make a widget responsive](/cbs/widgets/make-responsive)
* [Multi-calculator](/cbs/widgets/multi-calc)
* [Examples](/cbs/widgets/examples)