Embed a widget in common layouts

These recipes cover common ways to embed a widget. All use the salary widget, but any calculator type works.

Prefill multiple deductions from a URL

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

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

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:

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

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

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

For portals, combine URL-based default values with inline theming so per-employee data and site branding apply together.

⌘I

​Prefill multiple deductions from a URL

​Embed in an employee self-service portal

​Open the widget in a popup

Prefill multiple deductions from a URL

Embed in an employee self-service portal

Open the widget in a popup