CalcConfig | Embeddable Logic Studio

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 run through the CalcConfig expression runtime. It supports arithmetic, chained formula results, helper functions, and human-friendly aliases that are normalized before evaluation.

Variable Reference

baseValue

The initial base value

{fieldId}

The user's input/selection

{fieldId}Value

The modifier value

{formulaId}Result

The output from an earlier formula in the chain

Common Patterns

Simple Sum

baseValue + optionValue + sizeValue

Adds everything together.

Multiplication

baseValue + (quantity * pricePerUnit)

Multiplies quantity by a unit price.

Conditional

if(isRushOrder, baseValue + 50, baseValue)

Uses the runtime conditional helper to branch safely.

Formula Chaining

monthlyPaymentResult + supportCost

Later formulas can reference earlier outputs using the Result suffix.

05Logic Flow

Start

System loads the Base Value.

Process Inputs

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

Evaluate Formula

Inputs are normalized into a runtime context, then formulas execute in order so later steps can reference earlier results.

Format & Display

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

06Embedding

Copy the snippet below and paste it into the page where you want the calculator to mount. The script can target an explicit container or mount programmatically.

Script Attributes

Use data-target to mount into a specific container. data-height sets the initial iframe height before auto-resize.

Lifecycle Events

Host pages can listen for calcconfig:load, calcconfig:resize and calcconfig:unmount on the mount container via window.CalcConfig.events.

Public Runtime API

Published calculators expose GET /api/calculators/:id and POST /api/calculators/:id/calculate for runtime clients and custom integrations. Public responses also expose X-CalcConfig-API-Version and preflight-friendly OPTIONS handlers.

Ready to Build?

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

Create New Calculator

Documentation