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.


Jump to top