Как установить калькулятор на сайт Flexbe
Калькулятор Qalca встаёт на Flexbe через HTML-элемент или HTML-секцию, а открыть его можно и во всплывающем окне по кнопке. Понадобится около 10 минут.
Что понадобится
- Кабинет Qalca с готовым калькулятором. Его можно собрать из шаблона и задать свои цены.
- Доступ к редактору сайта на Flexbe.
- Адрес сайта: свой домен или технический адрес Flexbe. Технический адрес видно в разделе «Настройки → Домены».
Пошаговая установка
Шаг 1. Скопируйте код в кабинете Qalca
Откройте калькулятор и перейдите на вкладку «Код вставки». Код состоит из двух строк:
<div data-qalca="ID"></div> <script src="https://qalca.ru/widget.js" async></script>Вместо ID в кабинете уже стоит номер вашего калькулятора. Строки понадобятся по отдельности.
Шаг 2. Добавьте домен сайта
На вкладке «Домены» добавьте адрес сайта. Калькулятор показывается только на доменах из этого списка. На первый домен даётся 7 дней бесплатно.
Если сайт пока работает на техническом адресе Flexbe, добавьте его. Когда подключите свой домен, добавьте и его.
Добавьте домен, иначе калькулятор не покажется.
Шаг 3. Подключите скрипт на весь сайт
Справка Flexbe советует не писать JavaScript в тегах
<script>внутри HTML-редактора. Поэтому скрипт надёжнее подключить один раз для всего сайта:- Откройте «Настройки → Вставка кода».
- Вставьте строку
<script src="https://qalca.ru/widget.js" async></script>. - Сохраните.
Скрипт нужен один раз, даже если калькуляторов на сайте несколько.
Шаг 4. Добавьте HTML-элемент или HTML-секцию
Выберите, как будет стоять калькулятор:
- HTML-элемент внутри секции. Наведите курсор на любой элемент секции и нажмите «+» в нужном месте. HTML-элемент находится внизу списка, быстрее найти его через поиск по элементам. В свободном режиме кликните в пустую область секции и нажмите «Добавить элемент».
- Отдельная HTML-секция. Откройте добавление секций, раздел «Прочее», и выберите HTML-секцию. Подходит, если калькулятор должен занимать всю ширину.
Шаг 5. Вставьте код и сохраните
Откройте HTML-редактор элемента или секции и на вкладке «HTML» вставьте одну строку:
<div data-qalca="ID"></div>Нажмите «Сохранить» в правой верхней части экрана.
Шаг 6. Проверьте калькулятор
Код из «Вставки кода» в редакторе не работает, только в режиме предпросмотра и на сайте. Откройте предпросмотр или сам сайт, пощёлкайте варианты и отправьте тестовую заявку. Она должна прийти на почту или в Telegram, который вы указали в кабинете Qalca, и появиться в списке заявок вместе с адресом страницы и UTM-метками.
Калькулятор берёт шрифт сайта и сам подстраивает высоту.
Калькулятор во всплывающем окне (кнопка «Рассчитать»)
На Flexbe есть два способа.
Через окно Flexbe. Подходит, если кнопка уже есть в дизайне.
- Перейдите в раздел «Окна», нажмите «Добавить окно» и в разделе «Прочее» выберите HTML-окно.
- Вставьте в него
<div data-qalca="ID"></div>. - Нажмите на кнопку на странице и выберите действие «Показать всплывающее окно», укажите созданное окно.
Через код кнопки. Добавьте HTML-элемент и вставьте:
<button data-qalca-open="ID">Рассчитать стоимость</button>По клику Qalca сам откроет калькулятор поверх страницы. Атрибут data-qalca-open работает и на ссылке <a>.
Чтобы на всех страницах было «ушко» сбоку экрана, добавьте в «Настройки → Вставка кода» после строки со скриптом:
<div data-qalca="ID" data-qalca-mode="popup" data-qalca-tab="Рассчитать стоимость"></div>Можно открыть окно автоматически: data-qalca-delay="20" (через 20 секунд) или data-qalca-scroll="50" (после прокрутки половины страницы).
Если калькулятор не появился
- Домен не добавлен в кабинете. Адрес на вкладке «Домены» должен совпадать с адресом в браузере, в том числе технический адрес Flexbe.
- Смотрите в редакторе. Код из «Вставки кода» выполняется только в предпросмотре и на сайте. Проверяйте там.
- Нет скрипта. В HTML-элементе стоит только
<div>, а строка со скриптом не добавлена в «Настройки → Вставка кода» или не сохранена. - Изменения не сохранены. Нажмите «Сохранить» и обновите страницу.
- Старая версия в кеше. Обновите страницу с очисткой кеша (Ctrl+F5) или откройте в режиме инкогнито.
Шаблоны для сайта на Flexbe
- Строительство и ремонт
Пластиковые окна
Стоимость ПВХ-окна с монтажом, подоконником, отливом и откосами.
Стоимость - Клининг
Уборка квартиры
Поддерживающая, генеральная и послестроительная уборка с доп. услугами.
Стоимость - Экономика и финансы
Кредит
Ежемесячный платёж и переплата по потребительскому кредиту.
Стоимость - Экономика и финансы
Депозит
Доход по вкладу с капитализацией или без и пополнениями.
Стоимость - Автоуслуги
Такси
Цена поездки по тарифу, расстоянию и времени в пути.
Стоимость - Автоуслуги
ОСАГО
Предварительная цена полиса по мощности, стажу и региону.
Стоимость
Как вставить калькулятор на сайт Flexbe?
Подключите скрипт Qalca в «Настройки → Вставка кода», затем добавьте HTML-элемент или HTML-секцию и вставьте строку <div data-qalca="ID"></div>. Сохраните и проверьте в предпросмотре. Домен сайта нужно добавить в кабинете Qalca.
Где во Flexbe вставить код на все страницы?
В разделе «Настройки → Вставка кода». Есть ещё «Настройки → Виджеты» для кода на весь сайт и «Код на странице» для одной страницы. JavaScript в этих полях оборачивают в тег <script>.
Почему калькулятор не виден в редакторе Flexbe?
Код из «Вставки кода» работает только в режиме предпросмотра и на сайте. Сохраните страницу и откройте предпросмотр.
Можно ли открыть калькулятор по кнопке Flexbe?
Да. Создайте HTML-окно с кодом калькулятора и выберите у кнопки действие «Показать всплывающее окно». Или вставьте свою кнопку с атрибутом data-qalca-open через HTML-элемент.
Куда приходят заявки?
Другие платформы
На почту, в Telegram или в CRM через вебхук, это настраивается в кабинете Qalca. В заявке будут параметры расчёта, сумма, контакты, адрес страницы и UTM-метки. Другие варианты установки — в общей инструкции.
Поставьте калькулятор на Flexbe сегодня
Выберите шаблон, поменяйте цены и получите первую заявку с расчётом. 7 дней бесплатно.
Попробовать бесплатно