Documentation

Getting Started

Create an Account

Head to the sign up page and create a free account. No credit card required. You can build and publish up to 3 calculators on the free plan.

Create Your First Calculator

From your dashboard, click New Calculator. Give it a name and choose whether to start from scratch or use one of our pre-built templates. You'll land in the visual builder where you can add fields, write formulas, and preview results in real time.

Add Fields and Formulas

Use the Fields tab to add input fields. Supported types include number inputs, sliders, dropdowns, radio buttons, checkboxes, and text fields. Each field gets a unique ID (like monthly_revenue) that you reference in formulas.

Switch to the Formulas tab to add calculated results. Write expressions using field IDs and standard math operators. The builder validates your formula in real time and shows a live preview of the result.

Customize Branding

In the Style tab, customize your calculator's appearance to match your brand:

• Colors — primary, background, text, and button colors
• Border radius — sharp corners to fully rounded
• Font — choose from popular Google Fonts
• Button text — customize the calculate button label
• Logo — add your company logo

Publish and Embed

When you're happy with your calculator, click Publish in the builder toolbar. This generates a unique URL and embed code. Copy the embed snippet and paste it into your website. See the Embedding section below for platform-specific instructions.

Embedding Your Calculator

Script Embed (Recommended)

The script embed is the easiest way to add a calculator to your site. Copy the embed code from the Embed tab in the builder and paste it into your page's HTML. The script automatically creates a responsive container and handles resizing.

<div id="calcembed-SLUG"></div>
<script src="https://yourapp.com/embed/SLUG/widget.js" async></script>

Iframe Embed

If your platform doesn't support script tags, use an iframe instead:

<iframe
  src="https://yourapp.com/embed/SLUG"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Platform-Specific Instructions

Controlling Widget Size

The script embed automatically fills its container's width. To control the maximum width, wrap it in a div with a max-width style:

<div style="max-width: 500px; margin: 0 auto;">
  <!-- paste embed code here -->
</div>

For iframe embeds, adjust the width and height attributes directly on the iframe tag.

Formula Reference

Formulas are expressions that calculate results from your input field values. Reference fields by their ID (e.g. monthly_revenue).

Arithmetic Operators

Comparison Operators

Used in conditional expressions. Returns 1 (true) or 0 (false).

Conditional Expressions

Use the ternary operator to create if/then/else logic:

condition ? value_if_true : value_if_false

Example: Apply a 10% discount for orders over $10,000:

revenue > 10000 ? revenue * 0.9 : revenue

Built-in Functions

Example Formulas

Lead Capture

Enabling the Lead Gate

The lead gate displays a form overlay before showing calculator results. To enable it, open the Lead Gate tab in the builder and toggle it on. Visitors must fill in the required fields (like name and email) before they can see their results.

Lead capture is available on the Pro plan and above.

Configuring Gate Fields

By default the lead form includes Name and Email fields. You can customize which fields appear, mark them as required, and change their labels. Common additions include phone number, company name, and job title.

Webhook Setup

Send lead data to any external service automatically. Go to Settings → Webhook in your dashboard and enter a webhook URL. CalcEmbed sends a POST request with the lead data as JSON whenever someone submits the lead form.

This works with Zapier, Make (Integromat), n8n, or any service that accepts webhook payloads. The JSON payload includes:

{
  "lead_id": "uuid",
  "calculator_id": "uuid",
  "calculator_name": "My Calculator",
  "fields": {
    "name": "Jane Doe",
    "email": "jane@example.com"
  },
  "results": {
    "monthly_savings": 1200,
    "annual_savings": 14400
  },
  "submitted_at": "2026-01-15T10:30:00Z"
}

Google Sheets Export

Export your collected leads to Google Sheets from the Leads page in your dashboard. Click the Export CSV button to download all leads, then import the file into Google Sheets. For real-time sync, connect your webhook to Google Sheets via Zapier or Make.

FAQ