Load widget defaults from a URL

Instead of embedding configuration in every script tag, host it in one file and point the widget at it. The widget fetches the file on load via AJAX using JSONP (a jsonCallback wrapper), so you can update default values and styling in one place. Pass a url inside data-defaults:

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

Host the file as JSONP

Wrap the object in jsonCallback(...). Put field values under a model key; style sits at the top level:

jsonCallback({
  "model": {
    "grossPay": 2500,
    "payFrequency": "biweekly"
  },
  "style": { "body": { "background-color": "#2f4f4f" }, "labels": { "color": "#fff" } }
});

This is the easiest way to set richer defaults such as multiple deductions. Help text can’t be loaded this way. The URL file is read for field values (model) and style only. Set help text inline.

The widget still loads if the URL is unreachable or the JSON is malformed. It silently falls back to defaults rather than showing an error. Test your file before relying on it.

For the full attribute list, see Configuration methods. To manage defaults without hosting a file, see Manage widgets from the admin console.

⌘I

​Point the widget at a URL

​Host the file as JSONP

Point the widget at a URL

Host the file as JSONP