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