В этой статье я разберу два самых удобных и современных способа добавить калькулятор на сайт. Статья рассчитана, как на новичков без навыков программирования, так и на тех, кто уже давно разрабатывает сайты.
Конечно, это мое субъективное мнение, основанное на собственном опыте сайтостроения и эффективности с точки зрения маркетинга.
Содержание
- 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.
В данном калькуляторе используется достаточно сложная формула, которую мы разберем, и практически все функции, а потому он идеален для примера.
После установки плагина в админ-панели WordPress появится пункт «Cost Calculator», нажимаем на него, а после «Add new».
Вводим название и нажимаем «+»
В данном окне во кладке «GENERAL» нам необходимо выбрать основной цвет, слово которое будет перед ценой и знак валюты.
Во вкладке «CONTACT-FORM» ставим галку напротив «Display Next Button and Contact Form», что добавляет возможность оставить заявку после расчета. Если используем форму CF7, то вставляем id, если нет – оставляем пустым и заполняем «Admin Email» (куда будут приходить заявки) и «Email Subject» (Тема письма).
Ниже еще много настроек, но мы не будем рассматривать их все, а только те что касаются нашего калькулятора. В конце этого раздела я оставлю ссылку на подробные инструкции на англ языке, если будут вопросы – задавайте в комментариях.
Остальные вкладки «RECAPTCHA», «PAYPAL», «DESIGN» нас не интересуют. Нажимаем «ОТПРАВИТЬ», что в данном случае значит сохранить.
Далее кратко разберем, какие элементы нам доступны: Наводим на созданный калькулятор и нажимаем «+».
Элементы (модули) Cost Calculator:
- Group – группа элементов, расчет внутри которой происходит по заданной формуле через псевдо-код JS.
- Multiply – группа, значения элементов которой перемножаются между собой.
- Raw HTML – любой HTML код для вставки между элементами калькулятора? Как правило: заголовки, отступы и так далее
- Select – выпадающий список, к каждому пункту можно прикрепить фото.
- Separator – разделительная линия.
- Slider – элемент с ползунком.
- Switch – переключатель.
- Text – текстовое поле для произвольного ввода значения.
Первый элемент, который нам необходим это «группа». В эту группу будут добавлены поля, как на скриншоте ниже и написана формула для расчета внутри этой группы.
Поле тип стяжки добавим уже внутри группы через элемент «Select».
Заполняем имя, значения в формате «имя;цифра для расчета;описание» и фото. Изображения добавляются в том же порядке, как и значения.
Следующий элемент «Slider». Заполняем имя, минимальное значение (40), максимальное значение(1000), значение шага (5) и значение для расчета (1).
Следующий элемент для толщины стяжки, также «Slider»
Два следующих элемента «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 | ==4.5;slider2;hide();==4;slider2;hide();==5;slider2;show();==5.5;lider2;show(); |
Расшифруем первую строку кода:
== если значение типа стяжки равно 4.5 скрыть элемент с id slider2
Таким образом мы скрыли поле толщина стяжки для значений 4.5 и 4, которые принадлежат бетонной и керамзитобетонной стяжке пола.
Все что осталось сделать для того чтобы наш калькулятор приобрел законченный вид — это добавить заголовки и два поля в дополнительных работах.
Для того, чтобы добавить заголовок «Расчет стяжки пола» добавим к нашему калькулятору поле элемент «Cost Calculator Raw HTML» и перетянем мышкой вверх
А после пропишем там заголовок, используя форматирование HTML
Проделываем тоже самое для заголовка «Дополнительные работы»
Осталось добавить два слайдера «Подсыпка песка» и «Демонтаж стяжки», по старой схеме. Добавляем их вне группы, ниже. Готово!
Также стоит сказать отдельные элементы просто суммируются между собой. Принцип работы на скрине ниже.
Итак, мы создали мощный калькулятор для нашего сайта на wordpress. Бюджет 30$. След калькуляторы не будут нам стоить ничего. Ну а с этой инструкцией справится даже новичок. Будут вопросы – жду в комментариях.
uCalc — универсальный конструктор калькуляторов
uCalc – это сервис, который позволяет создать калькулятор вообще без навыков программирования и встроить его на любой сайт. Для wordpress есть специальный плагин, который упрощает вставку.
Преимущества uCalc:
1. Много модулей: ползунок, список, галочки, сбор контактов и прием оплат — все под рукой в визуальном редакторе.
2. Графический редактор формул (никакого кода, только математика)
3. Интеграция с социальными сетями и месседжерами. Например, можно добавить калькулятор в вашу группу Вконтакте.
4. Около 60 шаблонов для разных сфер бизнеса.
Минусы uCalc:
У этого сервиса есть, пожалуй, один существенный минус: он платный. Но есть бесплатная версия, которая вполне может устроить некоторых пользователей.
Стоимость от 2,5$ в месяц при оплате сразу на 5 лет и 5$ в месяц при помесячной оплате.
При этом есть бесплатная версия (урезан функционал: нет возможности отслеживать статистику и цели, нельзя добавлять изображения и встроена рекламная ссылка)
Подробного разбора работы Ucalc в этой статье не будет, но обязательно будет в следующей. Подписывайтесь на нашу мега-рассылку, чтобы не пропустить
Итоги. Что выбрать. Как быть.
- Если Вас устраивает бесплатная версия uCalc – используйте этот сервис. Однако я все же советую протестировать калькулятор с изображениями, купив платную версию — возможно конверсия будет выше.
- Если бесплатная версия uCalc не устраивает и ваш сайт на wordpress, я бы рекомендовал Cost Calculator. Покупаете 1 раз за 30$ и все. Ucalc обойдется Вам в 48$ в первый год (если оплатите сразу за год) или в 60$, если будите платить по месяцам.
- Если у вас совсем плохо с кодом, то лучше использовать uCalc, пусть даже и платную версию. Вы сможете сами все настроить и изменять при необходимости, не нужно будет платить каждый раз за настройку сторонним специалистам.
- Если ваш сайт не на WordPress используйте uCalc (При условии отсутствия достойного плагина для вашей CMS)
- Если активно занимаетесь SMM и ведете группы используйте uCalc для интеграции калькулятора в социальные сети.
На этом все. Спасибо за внимание. Вопросы задавайте в комментариях.
