> ## 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.

# Embed a widget in common layouts

> Recipes for embedding CBS widgets: employee self-service portals, popups, and multi-deduction setups.

These recipes cover common ways to embed a widget. All use the salary widget, but any [calculator type](/cbs/widgets/catalog) works.

## Prefill multiple deductions from a URL

Setting several deductions is easiest by loading them from a hosted file:

```html theme={null}
<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"
    data-defaults='{"url":"https://example.com/cbs/multiple-deductions.json"}'></script>
```

See [Load widget defaults from a URL](/cbs/widgets/defaults-from-url).

## Embed in an employee self-service portal

When the calculator loads after login, the employee is known. Fetch their values from your database, serve them by URL, and apply branding inline at the same time:

```html theme={null}
<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"
    data-defaults='{"url":"https://example.com/cbs/employee-portal.json","style":{"labels":{"color":"#fff"},"body":{"background-color":"#000"}}}'></script>
```

## Open the widget in a popup

<CodeGroup>
  ```html jQuery UI dialog theme={null}
  <button id="open-calculator">Open Calculator</button>
  <div id="calculator-dialog" title="Paycheck Calculator" style="display:none;">
    <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script>
  </div>
  <script>
    $("#open-calculator").on("click", function () {
      $("#calculator-dialog").dialog({ width: 1024, modal: true });
    });
  </script>
  ```

  ```html Native JavaScript theme={null}
  <button onclick="openCalculator()">Open Calculator</button>
  <script>
    function openCalculator() {
      var popup = window.open("", "calculator", "width=1024,height=768");
      popup.document.write(
        '<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"><\/script>'
      );
    }
  </script>
  ```
</CodeGroup>

<Tip>
  For portals, combine URL-based [default values](/cbs/widgets/configuration-methods) with inline [theming](/cbs/widgets/customize-styling) so per-employee data and site branding apply together.
</Tip>