«Конструктор калькуляторов» в личном кабинете «Все Виджеты» собирает калькулятор стоимости без программиста: вы добавляете поля (площадь, тип работ, дополнительные опции), пишете формулы по именам полей, а посетитель сайта двигает ползунки и сразу видит цену с разбивкой. Под итогом стоит форма заявки, и вы получаете не просто телефон, а готовый расчёт с параметрами. Ниже весь путь по шагам: от создания калькулятора до установки на сайт и статистики.
Если вы ещё не решили, нужен ли сайту калькулятор, начните со статьи «Калькулятор стоимости на сайт: зачем и как сделать». Возможности виджета коротко описаны на странице «Конструктор калькуляторов».
Короткая инструкция
- Войдите в личный кабинет app.allwidgets.ru и выберите плитку «Калькулятор» в панели «Мои виджеты».
- Нажмите «Новый виджет», в окне «Укажите ваше название для нового виджета» введите название (его видите только вы) и нажмите «Создать». Откроется редактор с заготовкой «Стоимость сайта».
- В карточке «Калькулятор» выберите подходящую заготовку или оставьте эту, затем поправьте заголовок, поля и цены под свой бизнес.
- В карточке «Формулы и итог» проверьте формулы, а в карточке «Проверка расчёта» подставьте значения, которые ввёл бы клиент, и сверьте итог.
- Настройте форму в карточке «Заявка» и куда присылать заявки в карточке «Уведомления о заявках».
- Нажмите «Сохранить». Если в формулах есть ошибка, редактор покажет её и не сохранит калькулятор, пока она не исправлена.
- Нажмите «Код для вставки», скопируйте код и вставьте его на страницу сайта туда, где должен стоять калькулятор.
- Откройте страницу сайта, проверьте расчёт и отправьте тестовую заявку. Она появится в разделе «Заявки».
На тарифе Free можно создать один калькулятор, на Pro три, на Business десять. Заявки и показы не ограничены. Подробнее о тарифах на странице «Тарифы».
Карточки редактора по порядку
Редактор состоит из карточек слева и окна «Превью» справа. Превью обновляется сразу, без сохранения: можно переключаться между видом «Компьютер» и «Телефон». Заявки и просмотры из превью никуда не отправляются и в статистику не попадают.
«Основное»
«Название виджета» видно только вам в кабинете. Переключатель «Временно отключить» прячет калькулятор с сайта, не стирая настройки. «Показывать на мобильных» включён по умолчанию: если его выключить, на телефонах калькулятор не появится ни в странице, ни окном.
«Шаблон» и «Дизайн»
Пять шаблонов оформления: «Минимал», «Стекло», «Неон», «Премиум» и «Пастель», а под ними выбор «Макет»: две колонки, одна колонка или по шагам. Шаблон и макет доступны на любом тарифе. Карточка «Дизайн» с цветами, шрифтом и скруглениями работает на Pro и Business. Всё о внешнем виде в статье «Калькулятор: настройка дизайна и шаблоны».
«Калькулятор»: заготовки, заголовок и подзаголовок
В блоке «Начать с готовой заготовки» пять готовых калькуляторов: «Стоимость сайта», «Ремонт квартиры за м²», «Аренда с доставкой», «Кредит и рассрочка» и «Клининг по шагам». Заготовка заменяет поля, формулы и настройки итога; форма заявки и дизайн остаются прежними. Изменения применятся после «Сохранить», так что заготовки можно спокойно перебирать. Ниже поля «Заголовок» и «Подзаголовок», которые посетитель видит над калькулятором.
«Поля калькулятора»
Здесь то, что заполняет посетитель. Кнопка «Добавить поле» предлагает 12 типов: «Число», «Ползунок», «Количество ±», «Выбор варианта», «Выпадающий список», «Опции (несколько)», «Переключатель», «Дата», «Период дат», «Скрытая константа», «Инфоблок» и «Раздел / шаг». Поля перетаскиваются за ручку слева или стрелками «Выше» и «Ниже», их можно дублировать и удалять.
У каждого поля есть «Имя в формулах»: латиница, цифры и знак подчёркивания, например area. Имя придумывается само из подписи, его можно поменять, и формулы обновятся автоматически. В блоке «Условие показа» задаётся, когда поле видно: например, поле «Расстояние» появляется, только если включена доставка. Все типы полей и их настройки разобраны в статье «Поля и формулы калькулятора: полный справочник».
«Формулы и итог»
Формулы считают цену. Каждая формула получает своё имя, «Подпись в смете» и, если нужно, единицу. Отметка «в смете» выводит формулу строкой в разбивке под итогом. Формулы пишутся по именам полей, например area * material, и могут ссылаться друг на друга. Над списком есть подсказка «Как писать формулы» и кнопки-имена: нажатие вставляет имя поля в формулу, а при наборе появляются подсказки (Ctrl+Пробел показывает все). Справа от формулы сразу видно её значение на тестовых данных.
Ниже, в блоке «Итог», выбирается «Формула итога», её подпись, валюта, число знаков после запятой, «Минимальный заказ», старая цена, вилка «от — до», уровни по сумме и «Примечание под итогом». По умолчанию в примечании стоит «Расчёт предварительный и не является публичной офертой», его лучше оставить.
«Проверка расчёта» и ошибки
В этой карточке вы задаёте значения полей так, как их ввёл бы посетитель, и видите результат каждой формулы и итог. Кнопка «Значения по умолчанию» возвращает исходные значения. Сайт, редактор и сервер считают одним и тем же движком, поэтому то, что вы видите здесь, увидит и клиент.
Если в формуле или условии показа ошибка (неизвестное имя, лишняя скобка, формулы ссылаются друг на друга по кругу), она подсвечивается красным с пояснением и номером символа. При нажатии «Сохранить» появится окно «Исправьте калькулятор перед сохранением» со списком ошибок, и калькулятор не сохранится. Сервер повторяет ту же проверку, поэтому сломанная формула на сайт не попадёт.
«Заявка»
Переключатель «Форма заявки под итогом» включает кнопку под итогом и форму. Настраиваются «Кнопка под итогом», «Заголовок формы», «Текст над полями», какие поля спрашивать (имя, телефон, email, комментарий: «не спрашивать», «необязательно» или «обязательно»), «Текст согласия (галочка обязательна)», «Ссылка на политику обработки ПДн», «Кнопка отправки» и «Сообщение после отправки». Нужен хотя бы один способ связи: телефон или email.
Отметка «Точная сумма и смета — только после заявки» показывает до отправки вилку вместо точной суммы и размытую смету. Это мягкий приём, а не защита цен: формулы выполняются в браузере. Подробно о нём и о том, как сервер пересчитывает итог заявки, в разделе «Заявка с пересчётом».
«Встраивание»
Здесь три готовых кода и ссылка на отдельную страницу, а также блок «Окно и кнопка-ярлык» и подсказка о целях Метрики. Переключатель «Что показывать в превью» («В странице» или «Всплывающее окно») меняет только превью и позволяет посмотреть оба варианта показа.
«Уведомления о заявках», «Аналитика», «White Label»
Заявки всегда сохраняются в разделе «Заявки», а в карточке «Уведомления о заявках» можно дополнительно получать их на почту, в Telegram и на вебхук. Подробности в статье «Заявки из новых виджетов: раздел «Заявки», почта, Telegram, вебхук». В карточке «Аналитика» включаются «Цели в Яндекс Метрике» и Google Analytics, там же перечислены идентификаторы целей калькулятора. «White Label» убирает ссылку на сервис под калькулятором на тарифе Business.
Как показать калькулятор на сайте
После «Сохранить» нажмите «Код для вставки» вверху редактора: откроется окно «Код для вставки на сайт» с кнопкой «Скопировать». Это основной код, тот же, что в первом пункте карточки «Встраивание». Есть три способа показа:
| Способ | Что вставить | Когда подходит |
|---|---|---|
| «1. В страницу (основной способ)» | Блок div и скрипт. Калькулятор встанет на место блока | Страница услуги или прайса, где калькулятор часть контента |
| «2. Всплывающее окно по кнопке» | Только скрипт, без блока div. Окно открывает кнопка-ярлык в углу, ссылка #aw-calc или любой элемент с атрибутом data-aw-calc-open | Калькулятор нужен на многих страницах, но не должен занимать место |
| «3. Отдельная страница по ссылке» | Ничего: ссылка вида https://app.allwidgets.ru/c/<код виджета>/ с кнопкой «Открыть» | Соцсети, рассылки, мессенджеры, сайты, куда нельзя вставить скрипт. Страница не индексируется поисковиками |
Код для встраивания в страницу выглядит так (у вас будет свой код виджета):
<div data-aw-widget="calc" data-uuid="код-виджета"></div> <script src="https://app.allwidgets.ru/s/calc/код-виджета/" async></script>
Блок div ставьте в то место страницы, где должен появиться калькулятор, скрипт можно поставить рядом или перед </body>. Один и тот же калькулятор можно поставить на несколько страниц. Как вставить код в Tilda, WordPress и другие конструкторы, рассказано в статье «Как установить виджет на сайт».
Для окна в блоке «Окно и кнопка-ярлык» настраиваются «Показывать кнопку-ярлык в углу (если на странице нет блока)», «Текст кнопки», «Положение» («Справа» или «Слева») и «Открыть само через, сек». Автооткрытие срабатывает один раз за сессию, а на телефоне не раньше чем через 30 секунд: ноль означает «не открывать».
Автооткрытие учитывает окна других виджетов «Все Виджеты»: если в этот момент на странице открыто чужое окно (или модальное окно самого сайта), калькулятор подождёт, пока его закроют. Пока открыто окно калькулятора, так же ждут автопоказы других виджетов. Открытие по кнопке, ссылке или из JavaScript ничего не ждёт.
Ссылка, которая открывает калькулятор окном, может стоять в любом месте страницы:
<a href="#aw-calc">Рассчитать стоимость</a> <button type="button" data-aw-calc-open>Посчитать цену</button>
Если на странице несколько калькуляторов окном, укажите код нужного в атрибуте: data-aw-calc-open="код-виджета".
JavaScript API и события
Для разработчиков на странице доступен объект window.AWCalc:
| Вызов | Что делает |
|---|---|
AWCalc.open() | Открывает калькулятор окном, а если он стоит в странице, прокручивает к нему |
AWCalc.close() | Закрывает окно |
AWCalc.get() | Возвращает значения полей, итог и результаты всех формул: {values, total, results} |
AWCalc.set(имя, значение) | Подставляет значение в поле по его имени и пересчитывает итог |
Если калькуляторов на странице несколько, в open и get можно передать код виджета, а в set третьим аргументом. Есть и общий вызов для всех виджетов «Все Виджеты»: window.allwidgets.open('calc', 'код-виджета'). Если скрипта этого калькулятора на странице нет, вызов подгрузит его и откроет окно, когда калькулятор будет готов (до 10 секунд). Сам вызов появляется на странице вместе со скриптом любого нового виджета сервиса.
На window приходят события aw:calc:interact (посетитель впервые изменил поле), aw:calc:change (любой пересчёт) и aw:calc:lead (заявка отправлена). В e.detail лежат код виджета, итог и значения полей. Например, подставить площадь из своего поля и узнать сумму заявки:
window.AWCalc.set('area', 50);
window.addEventListener('aw:calc:lead', function (e) {
console.log(e.detail.total);
});
Проверка на сайте
Откройте страницу с калькулятором в обычном окне браузера и на телефоне. Подвигайте поля и сравните итог с карточкой «Проверка расчёта» в редакторе. Затем отправьте тестовую заявку со своим телефоном: она появится в разделе «Заявки» с параметрами расчёта, а если включены уведомления, придёт на почту или в Telegram. Если калькулятора нет, проверьте, что код сохранён на опубликованной странице, переключатель «Временно отключить» выключен, а для телефона включён «Показывать на мобильных».
Статистика и цели Метрики
В списке калькуляторов у каждого есть ссылки «статистика» и «заявки». На странице статистики по дням (за 7, 30 или 90 дней) видны «Показы», «Открыли окно», «Начали расчёт», нажатия на кнопку заявки и «Заявки». Нажатия подписаны текстом вашей кнопки под итогом, например «Нажали «Получить точный расчёт»», а если форма заявки выключена, «Нажали кнопку заявки». Показом считается появление калькулятора на экране, а для окна появление кнопки-ярлыка или открытие окна.
Чтобы видеть калькулятор в Яндекс Метрике, включите «Цели в Яндекс Метрике» в карточке «Аналитика», укажите номер счётчика и создайте цели типа «JavaScript-событие» (их идентификаторы перечислены там же, в карточке):
aw_calc_interact: посетитель начал расчёт, то есть впервые изменил поле;aw_calc_lead: посетитель отправил заявку;aw_calc: общая цель заявки, срабатывает вместе сaw_calc_lead.
Как создать цели и сравнить виджеты между собой, описано в статье «Цели Яндекс Метрики новых виджетов».
Что почитать дальше
- «Поля и формулы калькулятора: полный справочник»: типы полей, все функции, примеры формул, заявка с пересчётом.
- «Калькулятор: настройка дизайна и шаблоны»: пять шаблонов, макеты, мобильная версия.
- «Заявки из новых виджетов»: раздел «Заявки», почта, Telegram, вебхук.
- Все статьи о калькуляторе собраны в рубрике «Конструктор калькуляторов».