Webflow — мощная платформа для создания сайтов без кода, любимая дизайнерами и агентствами. Но когда клиент просит добавить калькулятор, многие не знают с чего начать. Разбираем как это сделать за 10 минут.
HTML Embed — главный инструмент для встройки
Webflow предоставляет элемент HTML Embed — блок, в который можно вставить любой HTML/JS код. Именно через него устанавливается внешний калькулятор. Этот элемент доступен во всех платных планах Webflow.
Инструкция: добавляем калькулятор на Webflow
Шаг 1. Откройте проект в Webflow Designer и перейдите на нужную страницу.
Шаг 2. В левой панели найдите элемент Embed (в разделе Components) и перетащите его в нужное место на странице.
Шаг 3. Нажмите на блок Embed — откроется редактор кода. Вставьте код калькулятора из CAJS.
Шаг 4. Нажмите Save & Close. Калькулятор появится прямо в Designer в режиме превью.
Шаг 5. Опубликуйте сайт — калькулятор работает на живом сайте.
Стилизация под дизайн сайта
Калькуляторы с CAJS поддерживают настройку цветов через параметры в коде вставки. Это позволяет привести калькулятор в соответствие с фирменным стилем клиента — без доступа к исходному коду и без разработчика.
Типичные параметры для настройки:
- Основной цвет (кнопки, акценты)
- Цвет фона
- Шрифт (наследуется от сайта автоматически в большинстве случаев)
Какой калькулятор выбрать для Webflow-проекта
Зависит от ниши клиента. Самые востребованные в агентской практике:
- Калькулятор стоимости ремонта — для строительных компаний
- Ипотечный калькулятор — для агентств недвижимости
- Калькулятор доставки — для e-commerce
- Калькулятор аренды — для коммерческой недвижимости
Все калькуляторы из каталога CAJS устанавливаются на Webflow одинаково — через HTML Embed блок. Посмотреть полный каталог: cajs.ru/catalog/
