В этой статье я разберу два самых удобных и современных способа добавить калькулятор на сайт. Статья рассчитана, как на новичков без навыков программирования, так и на тех, кто уже давно разрабатывает сайты.
Конечно, это мое субъективное мнение, основанное на собственном опыте сайтостроения и эффективности с точки зрения маркетинга.
Содержание
- 4 веских причины поставить калькулятор на сайт
- Создаем калькулятор для WordPress
- Подробная настройка плагина Cost Calculator
- Универсальный конструктор калькуляторов для любого сайта
- Итоги. Что выбрать.
4 веских причины поставить калькулятор на сайт
Как правило, калькуляторы используются в первую очередь на коммерческих сайтах услуг. Также необходимость может возникать в информационных и новостных статьях: расчет топлива во время путешествия, количество продуктов во время диеты и другое.
Итак, какие преимущества даст вам установка калькулятора на сайт:
1. Удобство для клиентов и пользователей
Как правило стоимость любой услуги, будь то установка окон или пломбы у дантиста складывается из набора параметров, доп услуг и так далее. Калькулятор дает возможность пользователям моментально рассчитать конечную цену в любое время дня и ночи.
Знайте, что нынешнее поколение Y и тем более Z предпочитает принимать решение, оформлять заказ и даже оплачивать онлайн. Если на вашем сайте нет калькулятора или хотя бы удобной таблицы с ценами вероятность отказа от обращения к Вам увеличивается в разы.
2. Рост позиций в поисковых системах.
Объясню, как это связано. В 2018 году Google и Яндекс уделяют большое значение поведенческим факторам в ранжировании сайтов. Чем больше пользователь проводит на сайте, чем больше действий он делает: нажимает на кнопки, двигает ползунки и так далее, тем лучше ваш сайт выглядит в глазах поисковых систем.
Поэтому при прочих равных сайт с калькулятором будет выше в поисковой выдаче, чем сайт без калькулятора.
3. Удобство для менеджеров.
Во-первых, калькулятор избавляет менеджеров от звонков типа «Сколько стоит». Во-вторых, служит фильтром от обращений тех, кто не может себе позволить ваши услуги (прим. дорогая стоматологическая клиника). В-третьих, менеджеры сами могут использовать калькулятор для быстрого расчета.
4. (Не всегда) Рост посещаемости за счет использования.
Расскажу на примере: на сайт компании, которая занимается строительством домов под ключ, мы добавили несколько калькуляторов по расчету кровли, бетона и кирпича с актуальными ценами.
За счет востребованности такого калькулятора в данной нише, мы уже на второй месяц получили +1000 переходов из поиска по запросам «калькулятор кровли», «калькулятор расхода кирпича» и так далее.
Также доподлинно известно, что многие конкуренты регулярно используют эти калькуляторы.
Создаем онлайн-калькулятор на WordPress — Cost Calculator
Пора переходить от теории к практике. В данном разделе я расскажу, какой плагин я использую для создания калькуляторов на WordPress, как его настроить и кастомизировать на примере.
Начну с того, что достойных бесплатных плагинов на момент написания статьи не существует, ну или я плохо искал, в таком случае буду рад, если поделитесь в комментариях.
Лучшим или одним из лучших решений для вордпресс является плагин Cost Calculator. Его можно приобрести на сайте Themeforest за 30$ и использовать сколько угодно раз на скольких угодно сайтах. Конечно его можно попытаться найти бесплатно на некоторых форумах, торрентах и т.д. Лично я категорически не рекомендую устанавливать на свой сайт плагины, скачанные с таких сайтов. И главная причина это вредоносный код, который могут содержать плагины.

Преимущества Cost Calculator:
- Простой и понятный интерфейс с мощным функционалом.
- Свой визуальный редактор и встраивание в любое место сайта с помощью шорткода.
- Спец элемент для WPBakery Page Builder (в прошлом Visual Composer).
- Возможность сразу оставить заявку, после расчета стоимости. Интеграция с Contact Form 7 (также есть встроенная форма заявки).
- 20 демо-примеров позволят быстро настроить нужный вариант и разобраться с функционалом.
- JS pseudo code позволяет создать уникальную логику расчета под ваши нужды через математические формулы.
Настройка калькулятора Cost Calculator с нуля на примере
Итак, к практике. Создадим с нуля калькулятор как на сайте Napoly.by.
Во вкладке «CONTACT-FORM» ставим галку напротив «Display Next Button and Contact Form», что добавляет возможность оставить заявку после расчета. Если используем форму CF7, то вставляем id, если нет – оставляем пустым и заполняем «Admin Email» (куда будут приходить заявки) и «Email Subject» (Тема письма).
Ниже еще много настроек, но мы не будем рассматривать их все, а только те что касаются нашего калькулятора. В конце этого раздела я оставлю ссылку на подробные инструкции на англ языке, если будут вопросы – задавайте в комментариях.
Элементы (модули) Cost Calculator:
- Group – группа элементов, расчет внутри которой происходит по заданной формуле через псевдо-код JS.
- Multiply – группа, значения элементов которой перемножаются между собой.
- Raw HTML – любой HTML код для вставки между элементами калькулятора? Как правило: заголовки, отступы и так далее
- Select – выпадающий список, к каждому пункту можно прикрепить фото.
- Separator – разделительная линия.
- Slider – элемент с ползунком.
- Switch – переключатель.
- Text – текстовое поле для произвольного ввода значения.
Два следующих элемента «Switch». Заполняются имя поля, значение в выключенном состоянии и значение во включенном состоянии.
Итак, мы добавили все нужные элементы для нашей группы – пора написать правила (формулу) для нее.
Заходим в настройки группы и пишем формулу, в нашем случае она выглядит так
1 2 3 4 5 6 7 8 | var type = $1; var sq = $2; var depth = $3; var mat = $4; var izo1 = $5; if (100 < sq) final_res = (((type+izo1) * sq) + ((depth - 3.5) * depth)) *mat; if (200 < sq) final_res = (((type+izo1) * sq * 0.9) + ((depth - 3.5) * depth)) *mat; return final_res; |
А теперь разберемся что здесь к чему. Первые 5 строк, которые начинаются с var задают переменные для элементов калькулятора:
var (говорит о том что cоздается переменная)
type (задаем название нашей переменной)
= $1; (наша переменная получает значение первого элемента в группе, т.е. тип стяжки)
И так далее.
Следующие строки задают условия и формулы расчета, используя названия наших переменных. Русским языком:
если значение площади больше 100, то использовать формулу такую
1 | if (100 < sq) final_res = (((type+izo1) * sq) + ((depth - 3.5) * depth)) *mat; |
если значение площади больше 200, то использовать такую формулу
1 | if (200 < sq) final_res = (((type+izo1) * sq * 0.9) + ((depth - 3.5) * depth)) *mat; |
Сами формулы – это чистая математика.
И последняя строка в коде «return final_res;» возвращает результат пользователю. Выглядит все это сложно, но на самом деле все просто.
Как скрыть один из элементов калькулятора
В нашей группе существует еще одна особенность, поскольку у бетонной стяжки толщина не меняется, то нужно ее скрыть при выборе. Делается это очень просто.
Заходим в настройки элемента «Slider», который отвечает за толщину, открываем вкладку «DESIGN» и заполняем поле «Custom Id Attribute».
После переходим настройки элемента «Select», который отвечает за тип стяжки, во вкладке «GENERAL» заполняем поле «Change Event Condition» следующим кодом:
1 2 3 4 | ==4.5;slider2;hide(); ==4;slider2;hide(); ==5;slider2;show(); ==5.5;slider2;show(); |
Расшифруем первую строку кода:
== если значение типа стяжки равно 4.5 скрыть элемент с id slider2
Таким образом мы скрыли поле толщина стяжки для значений 4.5 и 4, которые принадлежат бетонной и керамзитобетонной стяжке пола.
Итак, мы создали мощный калькулятор для нашего сайта на wordpress. Бюджет 30$. След калькуляторы не будут нам стоить ничего. Ну а с этой инструкцией справится даже новичок. Будут вопросы – жду в комментариях.
uCalc — универсальный конструктор калькуляторов
uCalc – это сервис, который позволяет создать калькулятор вообще без навыков программирования и встроить его на любой сайт. Для wordpress есть специальный плагин, который упрощает вставку.
Преимущества uCalc:
1. Много модулей: ползунок, список, галочки, сбор контактов и прием оплат — все под рукой в визуальном редакторе.
Минусы uCalc:
У этого сервиса есть, пожалуй, один существенный минус: он платный. Но есть бесплатная версия, которая вполне может устроить некоторых пользователей.
Стоимость от 2,5$ в месяц при оплате сразу на 5 лет и 5$ в месяц при помесячной оплате.
При этом есть бесплатная версия (урезан функционал: нет возможности отслеживать статистику и цели, нельзя добавлять изображения и встроена рекламная ссылка)
Подробного разбора работы Ucalc в этой статье не будет, но обязательно будет в следующей. Подписывайтесь на нашу мега-рассылку, чтобы не пропустить
Итоги. Что выбрать. Как быть.
- Если Вас устраивает бесплатная версия uCalc – используйте этот сервис. Однако я все же советую протестировать калькулятор с изображениями, купив платную версию — возможно конверсия будет выше.
- Если бесплатная версия uCalc не устраивает и ваш сайт на wordpress, я бы рекомендовал Cost Calculator. Покупаете 1 раз за 30$ и все. Ucalc обойдется Вам в 48$ в первый год (если оплатите сразу за год) или в 60$, если будите платить по месяцам.
- Если у вас совсем плохо с кодом, то лучше использовать uCalc, пусть даже и платную версию. Вы сможете сами все настроить и изменять при необходимости, не нужно будет платить каждый раз за настройку сторонним специалистам.
- Если ваш сайт не на WordPress используйте uCalc (При условии отсутствия достойного плагина для вашей CMS)
- Если активно занимаетесь SMM и ведете группы используйте uCalc для интеграции калькулятора в социальные сети.
На этом все. Спасибо за внимание. Вопросы задавайте в комментариях.