The Calculators by Symmetry widget was designed to be easy to integrate into your current site or portal. To get started simply copy and paste the snippet below into any web page.
<script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"\></script>
Symmetry does not recommend running the widgets on a desktop through the file system, only through a web server implementation. However, you may use the following html code to create an .html file for testing and examining purposes. Note: Some functionality may not work as intended when run in this manner.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Widget Basic Example</title> </head> <body> <h1>My calculator widget<h1> <div style="width:1024px"> <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script> </div> </body> </html>
All the code snippets below are using the salary calculator widget. Any of the
other calculator widgets can be substituted in its place. Please see
the widgets section for the available widgets.
The widget does require a unique key. Simply substitute the key given to you with 'yourKey' in the script above. If you need assistance with your key or you do not have a key, please contact support at [[email protected]]([email protected]?subject=Calculators - Widgets Inquiry).
If an invalid or expired key is provided to the widget the following message
will be displayed.
Unable to load calculator. Please make sure the key you are using is valid and has not expired.
Once the script has been placed in your html document, navigate to your web page and you should see the calculator load. The calculator is ready to use and you can start submitting calculations.
The widget is responsive and will stretch to the size of the parent element where the script is placed. For example, if the widget is placed inside the <body> tag of your web page it will stretch to the full width of the viewport. If you have a <div> tag with a css width property set to 300px, then the widget will adjust and fit into that size.
<body> <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script> </body> <div style="width:300px"> <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script> </div>
Updated almost 3 years ago