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.
Updated 5 months ago