Как установить калькулятор на свой сайт или в любую CMS
Калькулятор Qalca встаёт на любой сайт, куда можно вставить HTML-код: самописный сайт, Joomla, OpenCart, MODX и другие движки. Нужны две строки кода и пять минут.
Что понадобится
- Калькулятор в кабинете Qalca. Можно взять готовый из шаблонов и задать свои цены.
- Доступ к файлам сайта или к админке CMS с правом вставлять HTML.
- Если сайт делал подрядчик, перешлите ему эту страницу: работы на пять минут.
Пошаговая установка
Шаг 1. Скопируйте код в кабинете Qalca
Откройте калькулятор в кабинете, вкладка «Код вставки»:
<div data-qalca="ID"></div> <script src="https://qalca.ru/widget.js" async></script>Первая строка — место, где появится калькулятор. Вторая подключает скрипт. Копируйте код из кабинета, там уже стоит ваш ID.
Шаг 2. Добавьте домен сайта
На вкладке «Домены» добавьте адрес сайта. Калькулятор работает только на доменах из этого списка. На первый домен даётся 7 дней бесплатно. Тестовый адрес добавьте отдельно.
Добавьте домен, иначе калькулятор не покажется.
Шаг 3. Вставьте код на страницу
Сайт на HTML. Откройте файл страницы и вставьте обе строки внутрь
<body>, в то место, где должен стоять калькулятор. Сохраните и загрузите файл на хостинг.Любая CMS. Найдите в редакторе страницы режим кода или элемент для HTML. Обычно это кнопка «Исходный код» или
</>, блок «HTML» или «Код». Вставьте код в этом режиме, а не в визуальном.Шаг 4. Если редактор вырезает скрипт
Многие CMS удаляют
<script>из текста страницы ради безопасности. Скрипт достаточно подключить на сайте один раз: в шаблон перед</body>или в поле настроек для счётчиков и кода в<head>. Тогда на странице остаётся только<div data-qalca="ID"></div>, и визуальный редактор его не тронет.Шаг 5. Опубликуйте и очистите кеш
Сохраните страницу и очистите кеш CMS, если он включён.
Шаг 6. Проверьте калькулятор
Откройте страницу в режиме инкогнито, посчитайте и отправьте тестовую заявку. Она придёт на почту или в Telegram и появится в кабинете с адресом страницы и UTM-метками.
Подсказки по движкам
Joomla
Удобнее всего модуль «Custom» (в Joomla 3 — Custom HTML): «Система» → «Модули сайта» → «Создать» → Custom. Вставьте код, выберите позицию и на вкладке «Привязка к меню» страницы, где показывать модуль.
Скрипт может пропасть по двум причинам. Редактор TinyMCE по умолчанию удаляет script, applet и iframe (настройка «Запрещённые элементы» в плагине TinyMCE). А фильтры текста в «Общих настройках», вкладка «Фильтры текста», ограничивают все группы, кроме суперпользователей. Самый безопасный путь: в своём профиле переключите редактор на «Редактор — нет» на время вставки и сохраняйте модуль под суперпользователем. Отключать фильтры для всех групп не советуем.
OpenCart
Используйте встроенный модуль «HTML-содержимое» (HTML Content): «Модули/Расширения» → «Модули», найдите его, установите и откройте на редактирование. Переключите редактор в режим кода и вставьте код. Затем «Дизайн» → «Макеты», выберите макет страницы и добавьте модуль в позицию «Содержимое сверху» или «Содержимое снизу». Если редактор убрал скрипт, подключите widget.js один раз в шаблоне подвала через «Дизайн» → «Редактор темы» и после сохранения очистите кеш.
MODX
Создайте чанк: «Элементы» → «Чанки» → новый чанк, например qalca, и вставьте в него код. Затем добавьте вызов [[$qalca]] в содержимое ресурса или прямо в шаблон. Если калькулятор нужен на многих страницах, поставьте widget.js в шаблон перед </body>, а в ресурсы — только <div data-qalca="ID"></div>. Если включён визуальный редактор, вставляйте вызов чанка в режиме кода.
Калькулятор во всплывающем окне (кнопка «Рассчитать»)
Добавьте атрибут data-qalca-open на любую кнопку или ссылку сайта:
<button data-qalca-open="ID">Рассчитать стоимость</button>Если в CMS нельзя менять атрибуты кнопки, вставьте эту строку как HTML. Скрипт widget.js на странице нужен один раз.
Ещё вариант — «ушко» сбоку экрана, которое может открыться само через N секунд или после прокрутки:
<div data-qalca="ID" data-qalca-mode="popup" data-qalca-tab="Рассчитать стоимость" data-qalca-scroll="50"></div>Если калькулятор не появился
- Домен не добавлен или открыт другой адрес: с
wwwи без, тестовый поддомен. - CMS вырезала скрипт. Откройте код страницы и проверьте, остались ли обе строки. Если нет, подключите скрипт в шаблоне (шаг 4).
- Изменения не сохранены или модуль не опубликован и не привязан к нужной странице.
- Кеш CMS, хостинга или браузера. Очистите и обновите страницу с Ctrl+F5.
- Режим предпросмотра. Проверяйте на опубликованной странице.
Шаблоны для сайта на любом движке
- Строительство и ремонт
Пластиковые окна
Стоимость ПВХ-окна с монтажом, подоконником, отливом и откосами.
Стоимость - Клининг
Уборка квартиры
Поддерживающая, генеральная и послестроительная уборка с доп. услугами.
Стоимость - Экономика и финансы
Кредит
Ежемесячный платёж и переплата по потребительскому кредиту.
Стоимость - Экономика и финансы
Депозит
Доход по вкладу с капитализацией или без и пополнениями.
Стоимость - Автоуслуги
Такси
Цена поездки по тарифу, расстоянию и времени в пути.
Стоимость - Автоуслуги
ОСАГО
Предварительная цена полиса по мощности, стажу и региону.
Стоимость
Подойдёт ли калькулятор для моего движка?
Другие платформы
Да, если в движок можно вставить HTML-код или подключить скрипт в шаблон. Для популярных конструкторов есть отдельные инструкции в разделе установки.
Нужен ли программист?
Обычно нет: нужно вставить две строки. Помощь пригодится, только если CMS не даёт править шаблон или вырезает код.
Можно ли поставить несколько калькуляторов на одну страницу?
Да. У каждого свой <div data-qalca="ID">, а скрипт подключается один раз.
Что делать, если своего сайта нет?
У каждого калькулятора есть прямая ссылка на страницу на qalca.ru. Её можно отправить в мессенджер или поставить в соцсети. Ссылка работает, пока у калькулятора есть оплаченный домен.
Калькулятор замедлит сайт?
Скрипт загружается с атрибутом async, то есть не блокирует отрисовку страницы, а сам калькулятор открывается во встроенном окне (iframe).
Поставьте калькулятор на свой сайт сегодня
Выберите шаблон, поменяйте цены и получите первую заявку с расчётом. 7 дней бесплатно.
Попробовать бесплатно