CalcConfig
Back to Dashboard

Documentation

Everything you need to build, configure, and embed interactive calculators.

Table of Contents
OverviewBasic InfoInput FieldsFormulasHow it WorksEmbeddingExamplesBest Practices

01Overview

This calculator builder lets you create interactive calculators that users can embed on any website. Each calculator consists of three main parts:

Basic InfoName, description, and base values.
InputsInteractive fields like sliders and dropdowns.
FormulasLogic that calculates the final result.

02Basic Information

Core Concepts

Base Value

The starting point for all calculations. This is useful for things like a base service fee or starting price.

Variable: baseValue

Display Format

Controls how the result looks. You can choose Currency (e.g., $100), Percentage (e.g., 50%), or Custom Units (e.g., 50 kg).

03Input Fields

Dropdown

Predefined options. Best for mutually exclusive choices like package tiers.

Number Input

Direct numeric entry. Good for quantities or custom measurements.

Toggle

On/Off switch. Perfect for binary add-ons like 'Express Shipping'.

Slider

Visual range selector. Engaging for inputs like budget or weight.

About Value Modifiers

Every input option has a "Value Modifier". This is the numeric value that this option contributes to the calculation. For example, a "Large" size option might have a modifier of 10.

04Formulas

Formulas give you full control. Use standard JavaScript math syntax to define exactly how your result is calculated.

Variable Reference

baseValue
The initial base value
{fieldId}
The user's input/selection
{fieldId}Value
The modifier value

Common Patterns

Simple Sum
baseValue + optionValue + sizeValue

Adds everything together.

Multiplication
baseValue + (quantity * pricePerUnit)

Multiplies quantity by a unit price.

Conditional
baseValue + (isRushOrder ? 50 : 0)

Adds 50 only if 'Rush Order' is checked.

05Logic Flow

1

Start

System loads the Base Value.

2

Process Inputs

System reads all user inputs and retrieves their corresponding modifier values.

3

Evaluate Formula

All variables are passed into your JavaScript formula to calculate the number.

4

Format & Display

The result is formatted (currency, %, unit) and shown to the user.

06Embedding

Copy the snippet below and paste it anywhere in your website's HTML (usually before the closing </body> tag).

<script src="https://calcconfig.com/embed.js" data-calc-id="YOUR_CALC_ID"></script>
Note

The calculator will render exactly where you place the script tag.

Ready to Build?

Create your first calculator in minutes. No coding required for basic setups.

Create New Calculator