Назад к витрине

Интерактивные калькуляторы стоимости

Готовые HTML/JS скрипты. Протестируйте логику и дизайн прямо на этой странице, посмотрите пример кода и скачайте полную версию.

Превью UI
Итого:250 000 ₽

Ремонт и Отделка

Учитывает площадь (ползунок), тип жилья и дизайн-проект. Отличный вариант для строителей.

function calculateRepair() { let area = document.getElementById('area').value; let priceM2 = document.getElementById('type').value; let hasDesign = document.getElementById('design').checked; let total = (area * priceM2) + (hasDesign ? area * 1500 : 0); document.getElementById('total').innerText = total + ' ₽'; }
990 ₽
Превью UI
Итого:3 000 ₽

Клининговые услуги

Подсчет стоимости уборки: тип услуги, количество комнат и дополнительные опции.

function calculateCleaning() { let typePrice = parseInt(document.getElementById('type').value); let rooms = document.getElementById('rooms').value; let hasWindows = document.getElementById('win').checked; let total = (rooms * typePrice) + (hasWindows ? 1500 : 0); document.getElementById('total').innerText = total + ' ₽'; }
990 ₽
Превью UI
Итого:25 000 ₽

Разработка и Диджитал

Glassmorphism-дизайн. Сборка сметы на сайт: выбор типа, SEO и учет наценки за срочность.

function calculateDev() { let basePrice = parseInt(document.getElementById('type').value); let hasSeo = document.getElementById('seo').checked; let isUrgent = document.getElementById('urg').checked; let sum = basePrice + (hasSeo ? 15000 : 0); let total = isUrgent ? sum * 1.5 : sum; document.getElementById('total').innerText = total + ' ₽'; }
1290 ₽
Превью UI
Итого:45 000 ₽

Мебель на заказ

Теплый дизайн. Расчет кухонь: длина, материал фасадов и класс фурнитуры для сметы.

function calculateFurniture() { let material = parseInt(document.getElementById('mat').value); let furniture = parseInt(document.getElementById('furn').value); let length = document.getElementById('len').value; let total = (material * length) + furniture; document.getElementById('total').innerText = total + ' ₽'; }
990 ₽
Превью UI
Итого:10 000 ₽

Бухгалтерия и Юристы

Строгий корпоративный стиль. Учет налогообложения, штата и валютных операций.

function calculateAccounting() { let base = parseInt(document.getElementById('type').value); let employees = document.getElementById('emp').value; let isVed = document.getElementById('ved').checked; let total = base + (employees * 1000) + (isVed ? 5000 : 0); document.getElementById('total').innerText = total + ' ₽'; }
990 ₽
Итого: 1 500 ₽

Универсальный Конструктор

Дизайн "Ретро-калькулятор". Комбинация селектов с коэффициентами для создания любой логики.

function calculateCustom() { let multiplier = parseFloat(document.getElementById('pack').value); let val1 = document.getElementById('v1').value; let val2 = document.getElementById('v2').value; let total = ((val1 * 100) + (val2 * 100)) * multiplier; document.getElementById('total').innerText = total + ' ₽'; }
990 ₽

Как интегрировать калькулятор на ваш сайт

Шаг 1. Распаковка архива

После успешной оплаты вы скачаете ZIP-архив. Внутри будет файл calculator-code.txt и подробная инструкция в PDF.

Шаг 2. Подключение Telegram (Опционально)

В самом начале скопированного кода найдите строчки TELEGRAM_BOT_TOKEN и CHAT_ID. Вставьте туда данные своего бота, чтобы заявки из калькулятора летели прямо вам в личные сообщения.

Шаг 3. Добавление блока на сайт

Зайдите в редактор страницы на Тильде. Нажмите "Добавить блок" -> Раздел "Другое" -> Выберите блок T123 (HTML-код).

Шаг 4. Публикация

Вставьте весь код в блок, нажмите "Сохранить и закрыть", а затем желтую кнопку "Опубликовать". Калькулятор готов к работе!

Шаг 1. Получение кода

Скачайте архив после оплаты, распакуйте его и откройте файл calculator-code.txt в любом текстовом редакторе (например, стандартный Блокнот). Скопируйте всё содержимое от начала до конца.

Шаг 2. Настройка Telegram (по желанию)

Если вы хотите, чтобы заявки с калькулятора приходили вам в Telegram, найдите в самом верху скопированного кода строчки TELEGRAM_BOT_TOKEN и TELEGRAM_CHAT_ID и впишите туда данные своего бота.

Шаг 3. Вставка на сайт (Стандартный редактор Gutenberg)

Зайдите в панель WordPress и откройте нужную страницу. Нажмите на иконку плюсика "+" (Добавить блок). В строке поиска введите "HTML" и выберите встроенный блок "Произвольный HTML". Вставьте наш код в появившееся поле.

Шаг 4. Вставка на сайт (Для пользователей Elementor)

Если вы собираете сайт на Elementor: откройте страницу в редакторе. В панели виджетов слева найдите базовый виджет "HTML-код". Перетащите его в нужное место на вашей странице и вставьте скопированный код в поле настроек виджета (в левой колонке).

Шаг 5. Сохранение результата

Нажмите синюю кнопку "Обновить" или "Опубликовать". Готово! Калькулятор автоматически адаптируется под ширину вашей страницы.

Шаг 1. Открытие файла вашего сайта

Скачайте и распакуйте наш архив. Откройте текстовый файл calculator-code.txt и скопируйте его содержимое. Затем откройте файл вашей страницы (обычно это index.html) в любом редакторе кода (VS Code, Sublime Text, Notepad++).

Шаг 2. Вставка кода калькулятора

Найдите в вашем коде тег <body>. Вставьте наш скопированный код ровно в то место, где должен визуально располагаться калькулятор (например, между секциями).

<!-- Ваша секция с услугами -->
<section id="pricing">
  <!-- ВСТАВИТЬ НАШ СКОПИРОВАННЫЙ КОД СЮДА -->
</section>
<!-- Подвал вашего сайта -->

Шаг 3. Настройка Telegram-заявок

Прямо в вашем HTML-файле, внутри вставленного скрипта, найдите переменные TELEGRAM_BOT_TOKEN и TELEGRAM_CHAT_ID. Замените их значения на ваши, чтобы заявки успешно отправлялись вам в личные сообщения.

Шаг 4. Проверка

Сохраните изменения в файле index.html и откройте его в любом браузере. Стили (CSS) и логика (JS) уже встроены в код, поэтому ничего дополнительно подключать не нужно — калькулятор сразу будет выглядеть стильно и работать.

Остались вопросы по настройке?

Наш ИИ-инженер знает всё о коде калькуляторов. Выберите популярный вопрос или задайте свой текстом.

Привет! Я технический ИИ-ассистент агентства ДСНА. Помогу отредактировать код или решить проблему с установкой скрипта на сайт. Чем могу помочь?

ИИ не справился или вам нужна разработка сложного индивидуального калькулятора?

Связаться с менеджером
Made on
Tilda