Product Guides
Login for full accessRequest a demo

Getting started

Suggest Edits

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>

📘

Important note:

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 create a ticket in Symmetry's Client Support Center.

📘

Important note:

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.

Responsive

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 over 1 year ago

Jump to top