Calculator

Calculator

Welcome to the “Calculator” documentation. Looking to integrate our Calculator Widget into your website? Our widget provides users with quick and easy access to essential calculations. In this guide, we'll show you how to use the editor to customize your Calculator Widget.

Step 1 : Open The Editor
Step 2 : Customize Inputs
Step 3 : Customize Results
Step 4 : Configure Settings
Step 5 : Choose Colors
Step 6 : Preview


Step 1: Open the Editor
1. Go to Calculator template.
2. Click on "Edit" after choosing your template.




Step 2: Customize inputs
1. In this panel, you can easily add, clone, update or delete  your range inputs as needed.




2. Customize each range input by adding your needed information such as : name, minimum value, maximum value, default value and input step.




3. Add your number prefix and suffix (It could be currency or unity or even a text).




4. Show or hide a hint text under your range input and update your text straight from widget using our text editor.





5. Finally, Allow conditions if needed and add, delete or update conditions for the purpose to hide/show your range input depending on other inputs' current values.




Step 3: Customize Results

1. In this panel, you can easily add, clone, update or delete your Results as needed.



2. Choose whether to show or hide your result and type its name.



3. Type and submit your equation to calculate the result number. View more details on how to create equations and use functions .



4. Add a prefix and suffix for your result number (It could be currency or unity or even a text).



5. Customize your result number and name by choosing the number position (inline,top or default) and how many numbers to display after comma, there's also a "Main Result" option for a better style (bigger text and bold number).



6. Show or hide a hint text under your result and update your text straight from widget using our text editor.




7. Adjust the background opacity , border width in px and customize colors as needed for each result.



8. Finally, Allow conditions if needed and add, delete or update conditions for the purpose to hide/show your result depending on inputs' current values.




Step 4: Configure settings

In this Calculator Widget settings panel, you have control over various aspects:
1. Main settings
  •  Check header option to display header on top of your widget , and cusomize the container width in "%" or "px". 

  •  Type in px the margin and padding values for your widget container. 


  •  Enter in px the gap between your inputs and results preview. Check the RTL option to reverse the text and range inputs directions. 


  •  Choose between the available options the thousands separator and decimal separator.




    • 2. Range Input Settings
  •  Show / Hide name or value and adjust the value size, font weight and border width. Check the background option to add a background color for the value and choose a round level.



    • 3. Results Settings

  •  Customize The results preview by picking its position, and centralize the text by checking the "Align Center" option. You can also choose to hide or show a header for your results and modify the results' container settings such as border width, padding and round.


  •  After checking the CTA option to display button you can start customizing its label, size, padding, round level and border width, also add a valid URL in the CTA link input. You can choose to show a header for the button and update it straight from the widget.


  •  Check the Footer option to display a footer for the results and update the text straight from the widget


    • Step 5: Choose Colors

    Within this panel, you can select colors that match your website's design.
    1. Main Colors
    Pick an option for your widget container Background (Transparent, color, gradient or image) then modify the options below, and change the text color that matches your background.



    2.Range Input Colors
    Highlight your range value by changing its background, text and border colors, and adjust your range input Theme and Thumb colors.


    3. Results Colors
    Pick an option for your results' container Background (Transparent, color, gradient or image) then modify the options below, and change the text and border colors that matches your background.


    Finally, customize your CTA colors according to your needs.



    Step 6: Preview

    Lastly, you can click on “Preview” to see how your calculator widget looks on both desktop and mobile devices. After this, you can proceed to the next step.


    How to create equations and use functions

    1. Basic Information
  •  Place your cursor and Type the equation you need


  •  Choose any Arithmetic symbol from the side options or type it straight from your keyboard.


    • 2. Use Inputs : Click "Inputs" and choose from the available range inputs your previously added to complete your equation.



    3. Use Results : Click "Results" and choose from the available results your previously added to complete your equation.


    4. Use Functions :  Click "Function" and choose from the available options to complete your equation.

  •  max(val1,val2...) : Static method returns the largest of the numbers given as input parameters.


  •  min(val1,val2..) : Static method returns the smallest of the numbers given as input parameters.


  • random(min,max) : Return random number between min and max.


  • round(val) : Static method returns the value of a number rounded to the nearest integer.

  • abs(val) : Static method returns the absolute value of a number.

  • trunc(val) : Static method returns the integer part of a number by removing any fractional digits.


    • 5. Submit Equation : After finishing typing your equation don't forget to submit by clicking on the submit button below.



    Related Articles:
    Comparison Table Popup / Section Shop