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. Clients can refer to the default properties in Symmetry's Client Support Center for additional 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" 
    data-defaults='{"style":{"body":{"background-color":"#add8e6"}}}'></script>

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" 
    data-defaults='{"style":{"body":{"background-color":"#add8e6"},"labels":{"color":"#00ff00"}}}'></script>

The widget will accept a few other styles defined in the default properties style documentation (requires login to Symmetry's Client Support Center). View the default properties documentation to see the names and acceptable values.