Калькулятор для сайта нейросетью в 2026 году: 4 шага без кода

Зачем калькулятор на сайте и когда он окупается

Прямой ответ: калькулятор ставят туда, где цена зависит от параметров клиента, а не фиксирована - ремонт, клининг, доставка, фотосъёмка, аренда, установка окон. Разница в поведении посетителя между «горячей» страницей с ценой и обычной статьёй большая: по данным Grow and Convert, страницы под коммерческий интент (человек уже готов платить и ищет цену) конвертируют в заявку около 4,78%, а обзорные информационные статьи - около 0,19%. Разница в 25 раз объясняется тем, что читатель обеих страниц ищет разное: на первой он хочет купить, на второй - разобраться

Что даёт калькулятор именно бизнесу: отсеивает тех, кому цена не подходит, ещё до звонка; собирает заявку сразу с параметрами и суммой, а не с голым «здравствуйте»; работает ночью и в выходные без твоего участия. Работает это для любой услуги, где сумма складывается из вводных: площадь, километры, часы, тип работы

Половина успеха - правильно разложить формулу цены

Прямой ответ: код калькулятора нейросеть напишет идеально, если ты понятно объяснишь, из чего складывается цена. Раскладка идёт на три части, и это техзадание пишется на бумаге раньше, чем открывается чат с нейросетью

База - за что берёшь деньги в основе: за квадратный метр, за час, за штуку, за километр. У меня в тестовом калькуляторе база - цена за м² уборки, три варианта: поддерживающая 80 ₽/м², генеральная 150 ₽/м², после ремонта 250 ₽/м²

Множители - что меняет базу в разы или процентах: срочность, сложность, тип услуги. В моём тесте это галочка «нужно сегодня» - она умножает всю сумму на 1,4, то есть добавляет 40%

Фиксированные надбавки - что прибавляется отдельной суммой независимо от площади: выезд за город, конкретная допработа. В моём тесте это мытьё окон - плюс 200 ₽ за створку

Формула получается такой: (база за м² + фиксированные надбавки за створки) × площадь, а множитель срочности умножает уже готовую сумму целиком. Ниже, в разделе про проверку, эта же формула покажет, где новичок обычно теряет контроль над расчётом

Опиши формулу нейросети и получи готовый файл

Прямой ответ: открываешь окно, где обычными словами пишешь ИИ задачу (Claude или ChatGPT), описываешь свою раскладку из предыдущего раздела с конкретными цифрами в формате промпта - и получаешь готовый HTML-файл одним куском

Что писать нейросети: назови поля ввода (площадь, тип услуги, галочки допработ), назови цифры каждой части формулы, скажи, что сумма должна пересчитываться сразу при вводе, без отдельной кнопки «посчитать». Отдельной строкой попроси округлять итог до целого числа и разделять тысячи пробелом - без этой просьбы сумма иногда выходит с копейками и слипшимися разрядами

Что увидишь: нейросеть отдаёт длинный блок кода целиком, обычно с кнопкой копирования сверху. Копируешь весь код, сохраняешь текстовым файлом с расширением .html (не .txt - это важно, иначе браузер откроет его как текст) и открываешь двойным кликом. Файл заработает сразу в браузере, без установки чего-либо

Что это даёт: рабочий калькулятор за один заход, без изучения вёрстки и без правки кода руками. Если что-то считает не так - не лезешь в код сам, а возвращаешься в чат и словами описываешь, что поправить: «при выборе срочно скидка применяется неправильно» или «сделай кнопку зелёной». Нейросеть выдаёт исправленную версию целиком, ты просто заменяешь файл заново

Если вместо своего сайта тебе быстрее показать калькулятор прямо в переписке или в отдельном окне без всякой вёрстки - тот же принцип реализован через Claude Artifacts, и там результат публикуется одной кнопкой без сохранения файла на диск. Разбор этого пути по шагам - в гайде Claude Artifacts: 4 шага до своего калькулятора со ссылкой

Проверь калькулятор на крайних значениях - я поймал реальную ошибку именно так

Прямой ответ: перед тем как ставить калькулятор на сайт, прогони его через три проверки - контрольный пример на бумаге, крайние значения и все галочки разом. Ошибка в формуле, которую заметит клиент, стоит дороже получаса собственных тестов

Свой прогон 05.09.2026 я довёл до конца на тестовом калькуляторе уборки. Контрольный пример: площадь 50 м², поддерживающая уборка (80 ₽/м²) - сумма 4000 ₽, совпадает с расчётом на бумаге. Добавил галочку «мытьё окон» (+200 ₽ за створку, три створки) - сумма выросла до 4600 ₽, тоже верно. Добавил галочку «нужно сегодня» (+40%) - сумма стала 6440 ₽, и это тоже сходится: 4600 × 1,4

А дальше при проверке крайнего значения (площадь = 0) вылезла настоящая проблема: сумма показала не 0 ₽, а 840 ₽. Причина - фиксированная надбавка за мытьё окон (200 ₽ × 3 = 600 ₽) не привязана к площади вообще, и при включённой галочке она осталась в сумме даже при нулевой площади; множитель срочности (×1,4) применился поверх неё и дал 840 ₽ вместо честного нуля. Формула была верна для обычных значений и молчала об ошибке ровно там, где новичок её не проверяет - на нуле

Это и есть причина, по которой раздел про крайние значения не пропускается: контрольный пример на обычных цифрах не ловит такие вещи, потому что 50 м² никогда не равны нулю. Если у тебя есть похожая фиксированная надбавка (выезд, доставка, минимальный заказ), проверь именно эту комбинацию - надбавка плюс нулевой объём - у себя тоже

Формула калькулятора в разных нишах: одна логика, разные цифры

Прямой ответ: раскладка на базу, множители и фиксированные надбавки работает для любой услуги, где цена зависит от объёма - меняются только сами цифры, а не сама формула

Мой тестовый калькулятор считает уборку, но принцип переносится на клининг, доставку, фотосъёмку и установку окон без изменений в логике - разница только в конкретных ставках

Если твоя услуга не попала в список, разложи её по тем же трём полкам - почти у любой цены за объём находится своя база, свой множитель на срочность или сложность и своя фиксированная доплата за конкретную допработу

Частые ошибки при сборке калькулятора

Поставь калькулятор на сайт: конструктор или отдельная ссылка

Прямой ответ: если сайт уже стоит на конструкторе (Tilda, WordPress), калькулятор вставляется через блок HTML-кода прямо в страницу; если сайта ещё нет или встройка капризничает - выкладываешь ту же страницу отдельной ссылкой бесплатным хостингом статики, это работает всегда и не зависит от чужой вёрстки

Путь 1. Блок HTML-кода в конструкторе. В Tilda это блок из категории «Другое» с HTML-кодом, в WordPress - блок «Произвольный HTML» в редакторе Gutenberg (официальный способ добавить свой код без плагинов, подтверждено документацией WordPress). Вставляешь код калькулятора целиком, сохраняешь, проверяешь на телефоне. Если сайта нет вообще ни на одном конструкторе, сначала нужен домен и хостинг - это отдельная короткая задача, разобрана в гайде купить домен и привязать его к сайту

Путь 2. Отдельная ссылка бесплатным хостингом. Netlify Drop - самый простой вариант: перетаскиваешь файл или папку в окно браузера прямо на странице сервиса и получаешь готовую ссылку с https:// за несколько секунд, аккаунт для этого не обязателен. Летом 2026 сервис обновил Drop заметнее всего с 2018 года: убрали ограничение на динамические сайты и многостраничные проекты, а больше 60% пользователей, зарегистрировавшихся в июне 2026, сделали свой первый деплой именно через drag-and-drop - это подтверждено официальным блогом Netlify

Живой пример калькулятора прямо на моём сайте - калькулятор вайбмаркетинга: семь коротких экранов вопросов, ответы остаются в браузере, в конце - четыре конкретных вывода. Он собран той же логикой, что описана выше: формула на входе, интерактивная страница на выходе

Что делать, если калькулятор не считает после встройки

Прямой ответ: калькулятор почти всегда молчит после вставки по одной из двух причин - конструктор задвоил теги страницы, либо плагин-конструктор экранировал символы кода

Если код работал у тебя на компьютере, а на сайте после вставки молчит - конструктор уже дал странице свои теги html, head, body, а твой код добавил вторые, и браузер запутался. Решение - попросить нейросеть версию «без тегов-обёрток, только сам калькулятор, стили в один тег style, скрипт в один тег script»

Если ты вставлял через визуальный конструктор (Elementor и похожие плагины), а не через чистый блок «Произвольный HTML» - такой плагин иногда превращает символы кода в обычный текст, и он перестаёт быть кодом. Решение - переключиться на чистый блок «Произвольный HTML» без обёртки плагина

Общее правило: если встройка капризничает дольше нескольких минут, не воюй с ней - отдельная ссылка через Netlify Drop решает вопрос быстрее и работает одинаково на любом сайте, потому что калькулятор там один и ему никто не мешает

Кому доверить формулу, если она сложнее трёх частей

Прямой ответ: раскладка на базу, множители и надбавки закрывает большинство услуг, но если у тебя вложенные условия (скидка от объёма, разные тарифы по регионам, комбинации из десятка допуслуг) - формулу проще собирать по частям, а не одним огромным описанием

Разбей задачу на этапы: сначала опиши нейросети только базу и один множитель, проверь на контрольном примере, затем попроси добавить следующую надбавку поверх уже работающей версии. Каждый шаг добавляет один новый элемент формулы, и ты сразу видишь, где именно расчёт сломался, если что-то пошло не так - в отличие от одной длинной просьбы, где ошибка прячется среди десяти условий сразу

Собираешь калькулятор для Telegram-бота - это другая задача

Если цель - не страница на своём сайте, а калькулятор ВНУТРИ Telegram-бота (открывается прямо в переписке без перехода в браузер), это уже не встройка в сайт, а Telegram Mini App - отдельная механика с подключением через BotFather, а не через блок HTML-кода конструктора

Разница в том, где клиент видит калькулятор: на своём сайте страница открывается в обычном браузере по адресу твоего домена, а Mini App разворачивается прямо внутри переписки с ботом, без перехода куда-либо. Формула цены (база, множители, надбавки) и три проверки из этой статьи одинаково нужны в обоих случаях - меняется только последний шаг, куда кладётся готовый файл. Пошаговый разбор именно пути с ботом - в гайде как собрать Telegram Mini App: 4 шага без программиста

Как собирать заявки из калькулятора без сервера

Прямой ответ: кнопка «Оставить заявку» ведёт по ссылке в личный Telegram-чат с уже готовым текстом заявки внутри - это официальный параметр Telegram-ссылок, а не самодельный трюк

Формат ссылки: https://t.me/твой_username?text=текст_заявки, где текст_заявки собирается из выбранных параметров и суммы. Параметр text - официальный, называется draft_text в документации Telegram про deep links и предзаполняет строку ввода в чате, если пользователь может писать в этот чат. Сообщение не отправляется автоматически - это защита от спама, человеку нужно нажать «отправить» самому, зато он видит готовый текст и жмёт одну кнопку вместо того, чтобы печатать всё заново

В своём тестовом калькуляторе я собрал такую кнопку и проверил её на кадре мобильного вида: при нажатии в поле ввода Telegram появляется строка вида «Заявка: уборка 50 м², Поддерживающая - 80 ₽/м², мытьё окон, срочно сегодня, сумма 5600 ₽» - готовый текст, который остаётся просто отправить

Ты уже прошёл путь от формулы на бумаге до рабочей проверки на крайних значениях - у моего собственного теста именно эта проверка поймала реальную ошибку в 840 рублей там, где на глаз всё выглядело правильно

Что ещё почитать про сайт и инструменты нейросетей

• Claude Artifacts: 4 шага до своего калькулятора со ссылкой - если нужен не только калькулятор цены, а любая интерактивная штука без сохранения файла на диск
• Как собрать Telegram Mini App: 4 шага без программиста - если калькулятор должен открываться внутри бота, а не на сайте
• ИИ и ремонт квартиры: своя смета за вечер - если задача не собрать калькулятор для клиентов, а посчитать смету для себя
• ChatGPT vs Claude: 4 задачи, цены и проверка из России - если не решил, в какой нейросети описывать формулу калькулятора
• Промт это что такое: определение, пять частей и примеры - если формулировка задачи нейросети не даётся с первого раза
• Создание сайтов на Claude: лендинг одной строкой в Claude Code - если рядом с калькулятором нужна целая страница услуги, а не только сайт-конструктор
• Timeweb купить домен: привязка к сайту за 5 шагов - если сайта под калькулятор ещё нет вообще
• No code в 2026: когда хватит конструктора, а когда нужен код - шире о том, где граница между конструктором и вайбкодингом
• Лендинг: что это простыми словами и 7 блоков в 2026 году - если калькулятор должен стоять на отдельной странице услуги
• Вайбкодинг: что это простыми словами и как начать с нуля - более широкий взгляд на сборку своих инструментов словами
• Как пользоваться Claude Code: установка и 9 шагов до проекта - если хочется не просто скопировать файл, а держать проект в отдельном окне и дорабатывать его дальше
• САЙТЫ: 5 бесплатных ИИ-инструментов и сервисов для новичка - обзор альтернатив, если Claude или ChatGPT не подошли
• Нейросети и инструменты: все разборы - полный список гайдов по инструментам на сайте

Источники

Инструменты и документация проверены живьём 05.09.2026, свой тестовый калькулятор собран и прогнан через три проверки в тот же день

• Grow and Convert, разбор конверсии контента по типу интента - growandconvert.com/marketing/bottom-of-the-funnel-content
• Официальный блог Netlify про обновление Drop летом 2026 - netlify.com/blog/thirteen-years-of-netlify-drop
• Страница Netlify Drop, куда перетаскивается файл - app.netlify.com/drop
• Документация Telegram про deep links и параметр text (draft_text) - core.telegram.org/api/links
• Разбор блока «Произвольный HTML» в редакторе WordPress Gutenberg - wpshout.com/wordpress-gutenberg-html
• Живой калькулятор на моём сайте, разобран как пример интерактивной страницы - theivansergeev.com/calculator

Памятка: калькулятор для сайта за один вечер

Семь строк, которые закрывают формулу, проверку и встройку

Частые вопросы