Quickstart: Embed a widget

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. Not sure widgets are the right path? See Widgets vs. API.

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:

<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script>

A minimal test page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Widget example</title>
  </head>
  <body>
    <div style="width:1024px">
      <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script>
    </div>
  </body>
</html>

2. Verify it renders

Widgets can’t run from a file:// page; they must load over http(s)://. To view your test page:

Save the HTML above as index.html.
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
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.

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.

3. Swap in a different calculator

Change the script filename to any calculator type. For example hourly.js, grossup.js, or flatbonus.js:

<script async src="https://calculators.symmetry.com/widget/js/hourly.js?key=yourKey"></script>

See Available calculators for the full list.

Next steps

Available calculators

Every calculator you can embed as a widget.

How calculators work

The model behind every calculation, and what drives the results.

More references:

​1. Add the script

​2. Verify it renders

​3. Swap in a different calculator

​Next steps

Available calculators

How calculators work

1. Add the script

2. Verify it renders

3. Swap in a different calculator

Next steps