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

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

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

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

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

Создаем калькулятор самостоятельно в uCalc

uCalc — главная страница

uCalc представляет собой Drag & Drop конструктор для создания калькуляторов и различных форм (регистрации, целевого действия, обратной связи, опросов). Платформа имеет простой удобный интерфейс, не требует специальных знаний и навыков, чем обеспечивает низкий порог входа и является универсальным решением для разработки калькулятора пользователями различных уровней.

Преимущества uCalc:

  • наличие готовых шаблонов и элементов дизайна (кнопок, ползунков, выпадающих списков, календаря и пр.);
  • наличие инструментов для кастомизации встроенных шаблонов или разработки собственного дизайна;
  • возможность получения уведомлений о поступлении заказов на email или телефон администратора сайта;
  • настройка автоматической отправки результатов расчетов по email или указанному номеру телефона со вставкой промо-кодов;
  • настройка выдачи нескольких вариантов результатов, например, с учетом скидки или оптового заказа;
  • расчет любых единиц измерения (веса, объема, габаритов, количества);
  • возможность вставки иллюстраций для каждого элемента;
  • автоматическая адаптация виджета под различные интернет-устройства.

Шаблоны – дизайн и структура

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

uCalc — шаблоны

Кастомизация шаблона осуществляется в визуальном редакторе, который позволяет внести изменения в следующие настройки:

  • тему оформления. На выбор предоставляется четыре схемы (Default, Minimalist, Material, Bootstrap);
  • цветовую схему. Выбрать одну из десяти предложенных или разработать собственную;
  • фон. Выбрать любой цвет для фона или сделать фон прозрачным;
  • размер формы. Указать ширину виджета (320, 640 или 960);
  • отступы между блоками. Задать точный размер отступов сверху и снизу для каждого блока;
  • размер и цвет шрифта. Изменить размер, цвет и начертание выделенного текста, а также привязать к нему активную ссылку.

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

uCalc позволяет создавать многостраничные калькуляторы и формы, при этом доступное количество страниц зависит от выбранного тарифного плана.

Настройка формул

uCalc — управление формулами

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

  • математические. Используют простейшие математические операторы (сложение, вычитание, деление, умножение). Также в формулу можно добавлять расчет процентов, например, для скидки и заключать переменные значения в скобки;
  • логические. Позволяют формировать несколько вариантов результатов в одной формуле и сократить форму заказа. Строятся на основании условных логических выражений (и, или, если, то, иначе) и операторов сравнения (больше, меньше, равно, не равно).

Дополнительный функционал

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

  1. Прием платежей. В конструкторе можно настроить онлайн прием платежей в необходимой валюте с помощью таких систем как PayPal, Яндекс.Касса (для ИП и юридических лиц), Юmoney, Stripe. Для этого необходимо указать свои реквизиты и назначение платежа, а также источник суммы.
  2. Отправка уведомлений. Владелец сайта может настроить отправку уведомлений о заказах на свой email или телефон с различными переменными (номером и деталями заказа, стоимостью, данными клиента и пр.). Таким же образом настраивается шаблон рассылки уведомлений клиентам.
  3. Переход по ссылке. Элемент Кнопка можно использовать и для размещения активной ссылки и перенаправления посетителя на страницу сайта, сторонний ресурс или самостоятельную форму заказа. Также ссылку можно использовать для размещения UTM-метки с целью отслеживания рекламных компаний.
  4. Отправка данных в CRM. Подключение платформы AmoCRM или Битрикс24 позволит вести учет клиентов и взаимоотношений с ними, что положительно скажется на качестве обслуживания и уровне продаж.
  5. Сбор статистики. Привязав кнопку к Google Analytics и Яндекс.Метрика и указав цель, можно получать подробные данные о просмотрах и лидах и анализировать поведение клиентов.
  6. Согласие на сбор данных. В uCalc имеется возможность получить согласие клиента на обработку персональных данных в соответствии с требованиями GDPR, используя типовой документ или разработав собственный.

С помощью элемента Поле можно создать форму обратной связи. Для этого необходимо разместить необходимое количество полей, например, Имя, Телефон, Email, выбрав соответствующий тип поля. В настройках можно указать, какие поля являются обязательными для заполнения.

Вкладка html-код позволяет опытным пользователям вставить в калькулятор произвольный код, таким образом, расширив функциональные возможности виджета.

Алгоритм работы с uCalc

Для начала работы с сервисом необходимо пройти процедуру регистрации, указав действующий email, или авторизироваться через аккаунт в социальных сетях (Google+, Facebook, ВК). Пользователи, ранее зарегистрированные в глобальной системе авторизации uCoz, могут войти в систему через uID-аккаунт. Перед созданием проекта в базе знаний конструктора можно посмотреть вводное видео и ознакомиться с ответами на основные вопросы по работе с системой.

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

  • дизайн – для настройки структуры и внешнего вида виджета;
  • формула – для составления и редактирования формул.

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

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

На любом этапе разработки калькулятора либо по его завершению необходимо сохранить проект, после чего открывается окно с html-кодом виджета, который интегрируется на сайт. Но разработчики uCalc значительно упростили задачу, разработав интеграции с большим количеством популярных CMS (WordPress, Joomla, OpenCart, Drupal) и конструкторов сайтов (Tilda, Wix, uCoz, uKit, PlatformaLP). Инструкции по установке кода на различные платформы можно найти в базе знаний сервиса.

В конструкторе имеется бесплатный тариф с возможностью создания до трех одностраничных форм. Однако ввиду отсутствия основного функционала его использование в коммерческих целях нецелесообразно. На протяжении 14 дней с момента регистрации бесплатно активируется тариф Базовый.

Кроме бесплатного, в конструкторе действует еще три тарифных плана, основные различия которых заключаются в количестве максимально доступных проектов, страниц, email и sms уведомлений:

  1. Базовый – 5 форм, 3 страницы, email 300 уведомлений. Стоимость 4$/месяц.
  2. Стандарт – 15 форм, 10 страниц, 1000 email уведомлений, 10 sms уведомлений. Стоимость 10$/месяц.
  3. ПРО – неограниченное количество форм, до 1000 страниц, 3000 email уведомлений, 30 sms уведомлений. Стоимость 24$/месяц.

Число email и sms уведомлений указано за месяц, но при необходимости пользователь может докупить их в неограниченном количестве.

При покупке на длительный период действует система скидок: от 6 месяцев – 10%, от 12 месяцев – 20%. Также существует фиксированная стоимость пакетов при покупке навечно: Базовый – 90$, Стандарт – 190$, ПРО – 390$.

Специалистам сервиса можно заказать разработку калькулятора или формы под ключ стоимостью от 3200 руб. Готовый калькулятор после приема можно самостоятельно редактировать в конструкторе uCalc.

Выводы

Владельцы бизнеса получают явные выгоды от установки на свой сайт калькулятора:

  1. Уменьшение штата менеджеров. Возможность самостоятельного выбора товаров или услуг посетителями, сравнение их стоимости и осуществление мгновенного заказа снижает количество обращений с аналогичными вопросами к менеджеру. Кроме этого, менеджеры сами могут использовать калькулятор для быстрого и эффективного обслуживания клиентов.
  2. Рост посещаемости. Анализ статистики поисковых запросов демонстрирует популярность онлайн расчетов. Грамотно подобранные ключевые слова на странице с калькулятором позволяют привлечь органический целевой трафик.
  3. Получение качественных заявок. Воспользовавшись калькулятором, посетитель получает полную информацию о товаре, доставке и стоимости. Это позволяет принять взвешенное решение без обращения к менеджеру и отсеивает тех, кого не устраивает итоговая стоимость или другие параметры.
  4. Повышение имиджа. Прозрачное ценообразование, гибкий расчет стоимости и выбор оптимального варианта способствуют росту доверия со стороны потенциальных клиентов. А возможность сделать индивидуальный заказ придает товарам или услугам эксклюзивности.

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

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

Существуют «честные» калькуляторы, демонстрирующие клиенту итоговую сумму на сайте, а также «ловушки», которые отправляют результаты на email или телефон. Но для того, чтобы пользователь согласился оставить свои контактные данные, его нужно чем-то заинтересовать, например, скидкой.

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

  • разрабатывать сложный интерфейс. Потенциальный клиент вряд ли захочет разбираться с обилием кнопок, ползунков и окон со специфическими характеристиками. Либо он может допустить ошибку при заполнении многочисленных параметров и в итоге получить неверный результат;
  • размещать калькулятор на пустой странице. Без наличия дополнительных элементов, стимулирующих посетителя принять решение в пользу заказа (призывов к действию, акционных предложений, скидок), не стоит ожидать от калькулятора высокой конверсии;
  • игнорировать seo-настройки. Чтобы привести на страницу с калькулятором целевой органический трафик, необходимо разместить на ней текстовый контент с использованием ключевых слов, а также не забывать про метатеги и ЧПУ.

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

» Статьи » Как создать калькулятор для любого сайта