Getting Started with Calculator Widget

With our Calculator widget, your website visitors can easily tackle complex math tasks directly on your site, whether it's calculating prices or managing mortgages. Setting up the widget is simple if you're familiar with spreadsheet editors like Excel.

Start with Templates and AI Calculator Generator

Creating a calculator from scratch can take time. We have two great solutions to help you make a calculator quickly and easily.

1

Templates

When you first create a widget, you'll be offered ready-made templates for popular cases like Product Price Calculator, Shipping Rates Calculator, Mortgage Calculator, and more:

Select a template and click Continue with this template.

2

AI Calculator Generator

Create a calculator by describing what you need. AI generates fields, formulas, and content for you.

To use this option, go to the Build tab → click ✨ Generate Calculator → enter your prompt → click Generate → Start Generation:

Adjust your prompt or generate again if needed.

Important: Generating a new calculator replaces the existing one, so use this option carefully for widgets you've already configured.

Need a personal touch? You can also add fields and calculations manually.

Adding Calculator Fields

Add fields so visitors can enter the information needed for calculations. To do that, navigate to the Build tab of the widget editor and choose the Fields that best suit your use case:Our widget offers a choice of 8 field types:

1. Slider — lets users select a value within a set range. You can define the minimum and maximum limits.
2. Number — enables users to input any numerical value of their choice.
3. Dropdown — provides a list of options with visible labels and values used for calculations.
4. Choice — displays options with labels and hidden values. Supports radio buttons (single selection) and checkboxes (multiple selection).
5. Image Choice — works like the Choice field but also allows adding images. Supports radio buttons and checkboxes.
6. Date — allows users to select a date from a calendar picker.
7. Text — lets users enter custom text information.
8. Heading — serves as a decorative element used to divide the form into sections.

After adding the required fields, it's time to write formulas to process the data collected from users.

Adding Calculations

A Calculation lets you add formulas, process user input, and display results. At least one Calculation is required to show results in your widget.

To get started, navigate to the Build tab and click on + Add Calculation:

In the context menu that appears, you can configure your calculation using the following features:

Name & Formula

1. Name — an optional name for your calculation. Useful when creating multiple calculations or displaying results clearly.
2. Formula — combines input values and defines how they are calculated. Results update automatically when input data changes.

Results

The Results section lets you control how your calculation appears to users. You can adjust the following settings:

1. Show in Results — show or hide the calculation output.
2. Primary Result / Secondary Result — highlight the importance of the result.
3. Format — display values as numbers, currency, or percentages.
4. Caption — add extra information about the result.
5. Divider — separate groups of calculations visually.
6. Conditional Logic — allows you to show or hide results based on specific conditions.

Here you can see these settings in action:

Nicely done! Next up, let's style the calculator to give it that finishing touch.

Styling the Widget

Customize your widget's appearance using the options available in the editor tabs.

Build Tab

Use the Build tab to customize Header and Results content:

1. Header — add a Title and Caption displayed at the top of the widget.
2. Results Section — allows you to set Section Heading and Footer, along with different buttons (Print, Download, and Reset).

Style Tab

On this tab, you can customize the following details:

1. Input Style — choose the appearance of input fields.
2. Font — select the font used across the widget.
3. Background — adjust the widget background color.
4. Text Color — customize the text color of input fields.
5. Field Accent Color — change the accent color of input fields and controls.
6. Results Background Color — choose the background color of the results section.
7. Action Button Color — set up the color of action buttons.

Here is a visual demonstration of what you can change:

Settings Tab

In this tab, you can configure the widget's width, language, and advanced settings:

1. Calculator Width — adjust the widget width to fit your page layout.
2. Language — change the widget language and edit displayed texts.
3. Custom CSS — add custom styles for advanced widget customization. Feel free to check out our community post for handy CSS codes!
4. Custom JS — add custom JavaScript code for advanced functionality.

We hope that this guide helped you figure out the Calculator setup! If you need any help, feel free to contact our Support team — we’ll be happy to assist.