Display settings by URL

The widget will accept a url to load default styling. The calculator will load the styles from the url via AJAX. We use JSONP with a callback method.

Example - styles from url

Larger white labels, dark background, and a yellow calculate button

<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey" 
    data-defaults='{"url":"https://calculators.symmetry.com/docs/examples/style.json"}'></script>

Following file hosted at https://calculators.symmetry.com/docs/examples/style.json

jsonCallback(
  {
    "style": {
      "labels": {
          "font-size":"16px",
          "color":"#fff"
        },
        "body": {
            "background-color":"#2f4f4f"
        },
        "calcButton": {
            "background-color":"#ffff00",
            "border-color":"#ffff00",
            "color":"#000"
        }
    }
  }
);

Help text values by url

The widget will accept a url to load custom help text. The calculator will load the help text from the url via AJAX. We use JSONP with a callback method.

Example - help text from url

Add custom help text for several calculator form fields

<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey" 
    data-defaults='{"url":"https://calculators.symmetry.com/docs/examples/helptext.json"}'></script>

Following file hosted at https://calculators.symmetry.com/docs/examples/helptext.json

jsonCallback(
  {
    "helptext": {
      "grossPay": "Custom help text for the gross pay field",
      "payFrequency":"Custom help text for the pay frequency field",
      "federalAllowances":"Custom help text for the federal allowances field"
    }
  }
);

📘
Important note:
The widget will still load if an invalid URL or bad JSON is passed to it.

Example - styles from url

Help text values by url

📘Important note:

📘
Important note: