Как создать калькулятор для сайта - обзор от site-builders.ru

Как создать калькулятор для сайта

Дата:
Просмотров:
Автор:
Сергей Гаврилов

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


Зачем нужен онлайн-калькулятор?

Онлайн-калькулятор на сайте решает как минимум три задачи:

  • Показывает прозрачность ценообразования и формирует доверие к компании.
  • Улучшает качество заявок и экономит время менеджера, которому больше не нужно самостоятельно рассчитывать стоимость каждого заказа.
  • Увеличивает посещаемость сайта за счёт запросов со словами «рассчитать», «расчёт».

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

  • заказать такси;
  • рассчитать стоимость доставки;
  • узнать необходимый объём строительных материалов;
  • посчитать проценты по кредиту и т.д.

У калькулятора может быть и другая функция — сбор личных данных пользователей. Некоторых такие псевдо-калькуляторы раздражают, но практика показывает, что они помогают увеличить количество лидов. Люди заполняют форму, потому что им интересно получить результат. Возможно, у них пока нет желания совершить заказ именно на вашем сайте, но даже за минимальное взаимодействие с виджетом можно зацепиться, чтобы превратить проходящего мимо посетителя в клиента.

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

В общем, инструмент действительно полезный, но есть один вопрос — как создать такой виджет? Раньше это было проблемой, для решения которой требовалось привлечение разработчиков. Теперь же есть конструктор uCalc, который позволяет собирать калькуляторы за несколько часов.


Создать калькулятор для сайта →

Возможности uCalc

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

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

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

Функциональность сервиса меняется в зависимости от того, на каком тарифе вы работаете. Бесплатный режим позволяет создать до 3 проектов со 100 уведомлениями по электронной почту и интеграцией CRM-системы (только компании и задачи, без сделок и контактов). Если вы хотите получить больше возможностей, то переходите на один из платных тарифов:

  • «Базовый» ($4 в месяц) — до 5 проектов, +300 уведомлений через e-mail и возможность докупить SMS-уведомления.
  • «Стандарт» ($10 в месяц) — до 15 проектов, +1000 уведомлений через e-mail, +10 SMS-уведомлений и возможность их докупить.
  • «Про» ($24 в месяц) — неограниченное количество проектов, +3000 уведомлений через e-mail, +30 SMS-уведомлений и возможность их докупить

Стоимость тарифов указана из расчёта помесячной оплаты. Чем продолжительнее оплаченный период, тем выше скидка. Например, покупка тарифа на год обойдётся на 20% дешевле. Платные пакеты услуг предлагают также дополнительные возможности:

  • Интеграция CRM-систем со сделками и контактами.
  • Сбор статистических данных с возможностью указывать цели.
  • Приём оплаты через калькулятор.
  • Использование картинок и ссылок.
  • Отключение рекламы.
  • Клонирование проектов.
  • Встраивание в калькулятор HTML-кода.
  • Возможность прикрепления файлов в виджете.
  • Живой чат со службой поддержки (только на тарифе «Про»).

Для тестирования возможностей uCalc доступен 14-дневный пробный период. Но платить вам никто не заставляет. В принципе, для начала будет достаточно той функциональности, которую предоставляет бесплатный тариф — калькуляторы на нём работают так же хорошо, как и на платных пакетах услуг. Если же вы поймёте, что виджет приносит пользу (и прибыль), но некоторых возможностей не хватает, то в любой момент можно переключиться на платный доступ.

Прогресс при редактировании калькулятор сохраняется автоматически, так что даже если вы случайно закроете вкладку, то ничего не потеряете. После завершения работы останется только получить код калькулятор и встроить его на страницу сайта. Ничего сложного в этом нет — обычная вставка скрипта. На некоторых конструкторах предусмотрена тесная интеграция с uCalc, которая позволяет добавлять калькуляторы буквально в несколько кликов без необходимости править файлы шаблона. В любом случае, вместе с кодом виджета вы получаете инструкцию по его добавлению на сайт.


Создание калькулятора на uCalc

Чтобы приступить к разработке первого проекта, необходимо зарегистрироваться на uCalc. Сделать это можно с помощью электронной почты или аккаунтов в популярных соцсетях. После регистрации вы окажетесь в панели управления, в которой добавляются и настраиваются калькуляторы.

Чтобы создать первый проект, нажмите на плюс. Выберите режим работы: самостоятельная сборка и нуля или использование шаблона. Для старта рекомендуем остановиться на втором варианте. Шаблоны разделены по категориям. Прежде чем выбирать конкретный вариант, изучите его через предпросмотр: нажимайте на кнопки, отмечайте разные опции и проверяйте, как меняется цена.

После выбора шаблона вы попадёте в визуальный редактор, в котором будете настраивать внешний вид и логику калькулятор. Начинать следует со структуры виджета — определить, какие поля должны быть в форме, и накидать их на рабочее пространство. Все доступные для добавления элементы расположены в левой части рабочего экрана; достаточно захватить нужное поле мышкой и перетащить его на подходящее место в калькуляторе.

У каждого элемента есть набор настроек. Например, в списке можно добавлять неограниченное количество пунктов, а для каждого поля назначать тип: числовое, текстовое, дата, время, файл и т.д. Кроме того, можно включать или выключать отображение отдельных частей виджета — например, заголовка или описания того или иного поля. Специальные параметры есть у кнопки — они позволяют настроить поведение по клику:

  • Отправка уведомления администратору сайта.
  • Переход по ссылке.
  • Переход к оплате.
  • Отправка данных в CRM.

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

  • Цвет фона — палитра для выбора цвета подложки калькулятора. Поддерживает вставку HEX-кодов для точного определения цвета.
  • Цветовые схемы — 10 пресетов для быстрого изменения сочетания цветов фона и других элементов виджета.
  • Тема оформления — варианты дизайна, которые включают в том числе разную вёрстку элементов.

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

Самый важный этап настройки калькулятора — добавление формы расчёта. Посмотрим на примере заказа такси, как это работает.

  1. В форме есть поля, обязательные для заполнения: телефон, место подачи автомобиля и конечная точка маршрута. Без них создать заказ нельзя.
  2. При заказе такси человек выбирает тариф и дополнительные услуги. От этого зависит итоговая стоимость. Соответственно, формула должна выглядеть примерно так: цена = A+B+C, где A — базовая стоимость поездки, B — надбавка за выбор тарифа и C — стоимость дополнительных услуг. При этом если тариф может быть только один, то дополнительных услуг — много. И все они прибавляются к цене, когда человек их выбирает.
  3. При добавлении полей в калькулятор им автоматически присваиваются буквы. Вам остаётся только зайти на вкладку «Формула», ввести значения для каждой опции и сформировать формулу, используя базовые математические операции.

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

Последний этап — добавление виджета на сайт. После нажатия кнопки «Сохранить» вы получите код калькулятора. Его нужно скопировать и вставить на ту странице, где пользователи должны выполнять расчёты. Если вы не знаете, как размещать код на сайте, воспользуйтесь инструкциями в базе знаний uCalc, в которых описан порядок встраивания виджета на разных конструкторах и CMS.

После успешной вставки обязательно проверить, как всё работает. При необходимости вы можете возвращаться в настройки проекта в визуальном редакторе, вносить изменения и публиковать калькулятор заново, заменяя старый код новым.

Приступить к созданию калькулятора →

Автор: Сергей Гаврилов
Сергей Гаврилов
Редактор Site-Builders.ru