Розробка онлайн-калькулятора

Розробка онлайн-калькулятора

Онлайн-калькулятор — один з найефективніших інструментів генерування лідів на сайті. Відвідувач вводить дані про свій проект, бачить орієнтовну вартість або результат розрахунку, і з високою вірогідністю залишає контакт. Сторінки з калькулятором мають конверсію в 2–5 разів вищу, ніж статичні прайс-листи.

Типи калькуляторів

Кошторис — "Скільки буде коштувати розробка сайту / ремонт / SEO". Параметри уточнюються крок за кроком, кінцеве число — діапазон.

ROI / Окупаємість — "Скільки ви заощадите / заробите з нашим продуктом". Вводяться поточні показники, виводиться економія.

Технічний — іпотечний калькулятор, розрахунок матеріалів, конвертер одиниць. Формула фіксована.

Опитувальник з результатом — "Підберемо тариф для вас". Multi-step форма, результат — рекомендація.

Архітектура формули

Формула обчислюється на клієнті в реальному часі. Для складних формул з розгалуженням краще описати логіку як конфіг, а не жорстко кодувати if-else:

interface CalculatorConfig {
  inputs: InputDefinition[];
  formula: FormulaDefinition;
  output: OutputDefinition;
}

interface InputDefinition {
  id:       string;
  type:     'number' | 'select' | 'checkbox' | 'range' | 'toggle';
  label:    string;
  default:  number | string | boolean;
  min?:     number;
  max?:     number;
  step?:    number;
  options?: { value: string; label: string; multiplier?: number }[];
}

type FormulaFn = (inputs: Record<string, number>) => number;

Приклад конфіги для калькулятора вартості розробки сайту:

const websiteCalculator: CalculatorConfig = {
  inputs: [
    {
      id: 'page_count',
      type: 'range',
      label: 'Кількість сторінок',
      default: 5,
      min: 1,
      max: 50,
      step: 1,
    },
    {
      id: 'site_type',
      type: 'select',
      label: 'Тип сайту',
      default: 'landing',
      options: [
        { value: 'landing',   label: 'Landing page',    multiplier: 1 },
        { value: 'corporate', label: 'Корпоративний',   multiplier: 1.8 },
        { value: 'ecommerce', label: 'Інтернет-магазин', multiplier: 3 },
        { value: 'custom',    label: 'Складний проект',  multiplier: 5 },
      ],
    },
    {
      id: 'has_cms',
      type: 'toggle',
      label: 'Система управління контентом (CMS)',
      default: false,
    },
    {
      id: 'has_seo',
      type: 'checkbox',
      label: 'SEO-оптимізація',
      default: false,
    },
  ],
};

Обчислення результату

const calculate = (inputs: Record<string, number | string | boolean>): CalculationResult => {
  const basePrice = 50_000;
  const typeMultipliers: Record<string, number> = {
    landing:   1,
    corporate: 1.8,
    ecommerce: 3,
    custom:    5,
  };

  const pageCount = inputs.page_count as number;
  const siteType  = inputs.site_type as string;
  const hasCms    = inputs.has_cms as boolean;
  const hasSeo    = inputs.has_seo as boolean;

  let price = basePrice * typeMultipliers[siteType] * (1 + (pageCount - 5) * 0.1);
  if (hasCms) price += 15_000;
  if (hasSeo) price += 25_000;

  return {
    total: Math.round(price),
    breakdown: [
      { label: 'Базова ціна', value: basePrice },
      { label: 'Множник типу сайту', value: price - basePrice },
    ],
  };
};