2. Setting up Calculators

Calculators are the heart of TailorQuote. They transform your product catalog into an interactive experience where customers can request quotes.

Understanding Calculators

A calculator in TailorQuote is an interactive form that:

• Displays your products with dynamic pricing
• Collects customer inputs for calculations
• Shows/hides products based on conditions
• Calculates quantities using formulas
• Generates accurate quote requests
• Can be embedded on your website or shared as a link

Creating Your First Calculator

Step 1: Navigate to Calculators

From your team workspace sidebar, click Calculators. You'll see a list of existing calculators or an empty state.

Step 2: Create New Calculator

Click Create New Calculator to start building.

Step 3: Basic Information

Enter the essential details:

• Title - Name of your calculator (e.g., "Website Design Quote")
• Description - Brief explanation of what this calculator quotes

Step 4: Select Products

Choose which products from your catalog to include in this calculator. These are the items customers can select when requesting a quote.

Step 5: Add Calculator Inputs

Define input fields that customers will fill in. These inputs drive your pricing calculations.

Calculator Configuration

Once created, click on your calculator to access the configuration page with multiple sections:

Calculator Inputs

Inputs are the fields customers fill out that drive your calculations. All inputs use the I_ prefix and can be referenced in product formulas.

Creating Inputs

1. In the calculator configuration, go to Inputs section
2. Click Add Input
3. Configure the input:
   • Input Name: Must start with I_ (e.g., I_WIDTH)
   • Display Label: What customers see (e.g., "Width (feet)")
   • Input Type: Number, Text, Dropdown, Checkbox
   • Required: Whether customers must fill this field
   • Default Value: Pre-filled value (optional)
   • Min/Max: For number inputs, set valid ranges
   • Unit: Display unit of measurement

Common Input Examples

Dimensions:

• I_WIDTH - Width in feet/meters
• I_HEIGHT - Height in feet/meters
• I_LENGTH - Length in feet/meters
• I_AREA - Total area (or calculate as I_WIDTH * I_LENGTH)

Quantities:

• I_QUANTITY - Number of items
• I_HOURS - Hours of service
• I_ROOMS - Number of rooms
• I_WINDOWS - Number of windows

Options:

• I_RUSH_ORDER - Checkbox for expedited service
• I_MATERIAL_TYPE - Dropdown for material selection
• I_LOCATION - Service location

Using Inputs in Product Formulas

Once defined, inputs can be used in product price formulas:

// Simple quantity-based pricing
V_UNIT_PRICE * I_QUANTITY

// Area calculation with material
I_WIDTH * I_HEIGHT * V_MATERIAL_SQFT

// Service with rush option
V_BASE_SERVICE * (I_RUSH_ORDER ? 1.5 : 1)

Formula-Based Quantities

Instead of asking customers how many units they need, calculate it automatically:

Automatic Quantity Calculation

In the product configuration, set the Amount Formula:

// Calculate paint gallons needed
MATH.CEIL(I_AREA / V_COVERAGE_PER_GALLON)

// Calculate tiles needed with 10% waste
MATH.CEIL((I_WIDTH * I_LENGTH / V_TILE_SIZE) * 1.1)

// Calculate labor hours based on complexity
I_ROOMS * (I_DIFFICULTY == 'complex' ? 3 : 2)

This eliminates guesswork for customers and ensures accurate quotes.

Conditional Product Visibility

Show or hide products based on customer inputs using conditional visibility.

Setting Up Conditions

1. In the product settings within the calculator
2. Set Visibility to Conditional
3. Define the condition formula

Condition Examples

Show premium option only for large orders:

I_QUANTITY > 100

Show installation only if requested:

I_INCLUDE_INSTALLATION == true

Show rush delivery for supported areas:

I_LOCATION == 'metro' || I_LOCATION == 'suburban'

Complex condition with multiple factors:

I_AREA > 500 && I_MATERIAL_TYPE == 'premium' && I_TIMELINE < 7

Visibility Modes

• Always Show: Product is always visible
• Always Hide: Product is hidden but included in calculations
• Conditional: Visibility depends on condition formula

When a product is conditionally hidden, it:

• Doesn't appear in the calculator interface
• Isn't included in price calculations
• Won't show in the final quote

Appearance Settings

Customize how your calculator looks to match your brand:

Heading

The main text displayed at the top of your calculator. This helps customers understand what they're getting a quote for.

Colors

• Primary Color - Used for buttons and key actions
• Background Color - Calculator background
• Text Color - Main text color

Call-to-Action Button

Customize the submit button text (default: "Get Quote"). Make it action-oriented like:

• "Get Your Quote"
• "Calculate Price"
• "Request Quote"

Calculator Settings

Configure the calculator behavior:

Currency

Select the currency for displaying prices:

• USD ($)
• EUR (€)
• GBP (£)
• CAD (C$)

User Information Collection

Choose what information to collect from customers:

Name Field

• Toggle on/off to collect customer names
• Mark as required or optional

Email Field

• Always collected (required for sending quotes)
• Cannot be disabled

Phone Field

• Toggle on/off to collect phone numbers
• Mark as required or optional

Company Field

• Toggle on/off to collect company names
• Mark as required or optional

Share & Embed Settings

Choose how customers will access your calculator:

Display Mode

Select between two options:

Embedded (Widget)

• Integrates into your existing website
• Maintains your site's navigation
• Best for established websites

Shareable Link (Page)

• Standalone calculator page
• Perfect for social media and email
• No website required

Preview and Testing

Using Preview Mode

Before going live, test your calculator:

1. Click the Preview Calculator button
2. Opens in a new window
3. Test the complete flow:
   • Product selection
   • Form fields
   • Submission process

What to Test

• All fields work correctly
• Required fields are enforced
• Colors display properly
• Submit button creates a quote
• Thank you message appears

Managing Calculators

Calculator List

The Calculators page shows:

• Calculator name
• Status (active/inactive)
• Created date
• Number of quotes received
• Actions (Edit, Preview, Delete)

Editing Calculators

To modify a calculator:

1. Click on the calculator name
2. Click Edit Calculator button
3. Make your changes
4. Click Save Changes

Deleting Calculators

To remove a calculator:

1. Click Delete Calculator in the configuration page
2. Confirm the deletion
3. The calculator and its embed codes become inactive

Best Practices

Input Design

• Start Simple: Begin with essential inputs only
• Clear Labels: Use descriptive, customer-friendly labels
• Provide Ranges: Set min/max values to prevent errors
• Add Help Text: Explain what each input means
• Group Related Inputs: Organize inputs logically

Formula Best Practices

• Test Edge Cases: Check with minimum and maximum values
• Handle Zero Values: Ensure formulas work with 0 inputs
• Round Appropriately: Use MATH.CEIL for materials that can't be partial
• Document Complex Logic: Add comments to explain formulas
• Validate Results: Test calculations match manual math

Conditional Logic

• Start with Simple Conditions: Test with basic true/false first
• Progressive Disclosure: Show advanced options only when needed
• Clear Dependencies: Make it obvious why products appear/disappear
• Test All Paths: Verify all condition combinations work
• Provide Feedback: Explain why certain options aren't available

Performance Tips

• Minimize Input Count: Each input adds complexity
• Cache Calculations: Reuse calculated values in multiple formulas
• Optimize Conditions: Simpler conditions evaluate faster
• Test on Mobile: Ensure calculator performs well on all devices

Publishing Your Calculator

For Embedded Calculators

1. Set display mode to Embedded
2. Copy the embed code
3. Add to your website where needed
4. The calculator loads automatically

For Standalone Pages

1. Set display mode to Page
2. Copy the public link
3. Share via email, social media, etc.
4. Users access directly via the link

Monitoring Performance

Track your calculator's success through:

• Number of views (via Preview)
• Quotes submitted (in Quotes section)
• Completion rate
• Customer feedback

Common Use Cases

Area-Based Calculations

Flooring/Painting/Landscaping:

• Inputs: I_WIDTH, I_LENGTH
• Calculate area: I_WIDTH * I_LENGTH
• Materials needed: MATH.CEIL(area / V_COVERAGE)
• Show premium options conditionally based on area

Quantity with Options

Custom Manufacturing:

• Inputs: I_QUANTITY, I_MATERIAL, I_FINISH
• Price formula: I_QUANTITY * V_BASE * materialMultiplier * finishMultiplier
• Show bulk discount products when I_QUANTITY > 100

Service Hour Calculations

Consulting/Labor:

• Inputs: I_HOURS, I_URGENCY, I_COMPLEXITY
• Rate formula: V_HOURLY * urgencyMultiplier * complexityMultiplier
• Show senior consultant option when I_COMPLEXITY == 'high'

Package Builders

Event Planning/Catering:

• Inputs: I_GUESTS, I_SERVICE_LEVEL, I_DURATION
• Show different packages based on guest count
• Calculate staff needed: MATH.CEIL(I_GUESTS / 25)
• Add overtime products when I_DURATION > 4

Complex Configurations

Construction/Renovation:

• Multiple dimension inputs for different areas
• Material selection affects multiple product prices
• Labor hours calculated from total scope
• Permit/inspection products shown based on project size

Troubleshooting

Calculator Not Showing

• Verify embed code is correct
• Check display mode setting
• Ensure calculator is saved

Fields Not Working

• Refresh the page
• Check field settings
• Test in Preview mode

Quotes Not Received

• Verify email field is enabled
• Check Quotes section
• Ensure form submits successfully

Next Steps

With your calculator configured:

1. Embed it on your website
2. Start receiving quotes
3. Invite team members to help manage quotes

Your calculator is ready to start converting visitors into qualified leads!