Display settings inline

In addition to allowing default calculator values, the widget's look and feel can be customized. The JSON object used in the data-defaults attribute can contain styling. Refer to the default properties style documentation.

Basic Example - Setting the background color

Background color - light blue #add8e6

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

Example - Multiple styles

Background color - light blue #add8e6, label color - evergreen #00ff00

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

The widget will accept a few other styles defined in the default properties style documentation. View the default properties documentation to see the names and acceptable values.

Jump to top