ВойтиПопробовать бесплатно

Как установить калькулятор на сайт WordPress

Калькулятор Qalca вставляется на WordPress двумя строками кода: в редакторе блоков, в Elementor или в классическом редакторе. Плагин ставить не нужно.

Что понадобится

  • Калькулятор в кабинете Qalca. Можно взять готовый из шаблонов и поменять цены под себя.
  • Доступ к админке WordPress с ролью «Администратор». У «Автора» и у всех, кроме суперадминистратора, на мультисайте WordPress вырезает тег <script> при сохранении.
  • Если сайт на WordPress.com, а не на своём хостинге: JavaScript там можно добавлять только на тарифе с плагинами. На бесплатном и младших тарифах скрипт работать не будет.

Пошаговая установка

  1. Шаг 1. Скопируйте код в кабинете Qalca

    Откройте калькулятор в кабинете, вкладка «Код вставки». Код выглядит так:

    <div data-qalca="ID"></div>
<script src="https://qalca.ru/widget.js" async></script>

    Вместо ID будет номер вашего калькулятора. Копируйте код целиком из кабинета, не набирайте вручную.

  2. Шаг 2. Добавьте домен сайта

    На вкладке «Домены» добавьте адрес сайта, например mysite.ru. Калькулятор показывается только на доменах из этого списка. На первый домен даётся 7 дней бесплатно. Если у сайта есть тестовая копия на другом адресе, добавьте и его.

    Добавьте домен, иначе калькулятор не покажется.

  3. Шаг 3. Вставьте код на страницу

    Выберите способ по тому, в чём вы редактируете страницу.

    Редактор блоков (Gutenberg). Откройте страницу, нажмите «+» в нужном месте и найдите блок «Произвольный HTML» (в английской версии Custom HTML). Быстрее: в пустой строке наберите /html и нажмите Enter. Вставьте код в поле блока. Чтобы проверить вид, переключитесь на предпросмотр в панели блока.

    Elementor. Откройте страницу в Elementor, найдите в списке виджетов «HTML» (значок </>) и перетащите его в нужное место. Вставьте код в поле виджета. По умолчанию виджет HTML доступен только администраторам, это настраивается в «Менеджере ролей» Elementor.

    Классический редактор. Переключитесь с вкладки «Визуально» на вкладку «Текст» и вставьте код туда, где должен стоять калькулятор. Не возвращайтесь на «Визуально» до сохранения: визуальный режим может переделать разметку.

  4. Шаг 4. Сохраните и опубликуйте

    Нажмите «Обновить» или «Опубликовать». В Elementor — «Опубликовать» внизу панели. Черновик и предпросмотр не всегда показывают скрипты так же, как опубликованная страница.

  5. Шаг 5. Сбросьте кеш

    Если на сайте стоит плагин кеширования или оптимизации, очистите его кеш. Если в нём включено объединение или отложенная загрузка JavaScript, добавьте qalca.ru/widget.js в исключения.

  6. Шаг 6. Проверьте калькулятор

    Откройте страницу в режиме инкогнито, посчитайте что-нибудь и отправьте тестовую заявку. Она должна прийти на почту или в Telegram и появиться в кабинете вместе с адресом страницы и UTM-метками.

Калькулятор во всплывающем окне (кнопка «Рассчитать»)

Стандартный блок «Кнопки» не даёт добавить свой атрибут, поэтому кнопку проще сделать в том же блоке «Произвольный HTML» или виджете HTML:

<button data-qalca-open="ID">Рассчитать стоимость</button>
<script src="https://qalca.ru/widget.js" async></script>

Атрибут data-qalca-open работает и на ссылке: <a href="#" data-qalca-open="ID">Рассчитать</a>. Скрипт на странице нужен один раз, даже если кнопок несколько.

Вариант без кнопки: «ушко» сбоку экрана, которое может открыться само через N секунд или после прокрутки.

<div data-qalca="ID" data-qalca-mode="popup" data-qalca-tab="Рассчитать стоимость" data-qalca-delay="20"></div>

Если хотите «ушко» на всех страницах, вставьте этот код в виджет «Произвольный HTML» в подвале сайта.

Если калькулятор не появился

  • Домен не добавлен. Проверьте вкладку «Домены» в кабинете. Адрес с www и без него, а также тестовый адрес нужно сверить с тем, что открыт в браузере.
  • WordPress вырезал скрипт. Так бывает, если страницу сохранял пользователь без права unfiltered_html: «Автор», «Участник» или любой, кроме суперадминистратора, на мультисайте. Пересохраните страницу под администратором. Если нельзя, подключите widget.js один раз на весь сайт через тему или плагин для вставки кода в шапку или подвал, а на странице оставьте только <div data-qalca="ID"></div>.
  • Изменения не опубликованы. Проверьте, что страница не осталась черновиком.
  • Кеш. Очистите кеш плагина, хостинга и CDN, если он есть. Обновите страницу с Ctrl+F5.
  • Оптимизатор JavaScript. Плагины, которые объединяют и откладывают скрипты, иногда ломают сторонний код. Исключите widget.js из оптимизации.

Шаблоны для сайта на WordPress

  • Строительство и ремонт

    Пластиковые окна

    Стоимость ПВХ-окна с монтажом, подоконником, отливом и откосами.

    Стоимость
  • Клининг

    Уборка квартиры

    Поддерживающая, генеральная и послестроительная уборка с доп. услугами.

    Стоимость
  • Экономика и финансы

    Кредит

    Ежемесячный платёж и переплата по потребительскому кредиту.

    Стоимость
  • Экономика и финансы

    Депозит

    Доход по вкладу с капитализацией или без и пополнениями.

    Стоимость
  • Автоуслуги

    Такси

    Цена поездки по тарифу, расстоянию и времени в пути.

    Стоимость
  • Автоуслуги

    ОСАГО

    Предварительная цена полиса по мощности, стажу и региону.

    Стоимость

Все шаблоны →

Вопросы

Частые вопросы: калькулятор на WordPress

Не нашли ответ?Напишите на hello@qalca.ruНаписать
Нужен ли плагин, чтобы вставить калькулятор в WordPress?

Нет. Хватит блока «Произвольный HTML», виджета HTML в Elementor или вкладки «Текст» в классическом редакторе. Плагин может понадобиться только для того, чтобы подключить скрипт один раз на весь сайт.

Работает ли калькулятор с Elementor, Divi и другими конструкторами?

Да, если в конструкторе есть элемент для HTML-кода. В Elementor это виджет «HTML». В других конструкторах ищите элемент «HTML» или «Код».

Можно ли поставить калькулятор на несколько страниц?

Да. Вставьте тот же код на каждую страницу. Если калькуляторов несколько, у каждого свой ID, а скрипт widget.js на странице нужен один.

Калькулятор подстроится под дизайн темы?

Калькулятор берёт шрифт сайта, а цвет кнопок и вид формы настраиваются в кабинете. Высота окна подстраивается сама, прокрутки внутри не будет.

Подходит ли калькулятор для WooCommerce?

Калькулятор вставляется на любую страницу WooCommerce, куда можно добавить HTML, но работает отдельно от корзины: клиент оставляет заявку с расчётом, а не оформляет заказ. Подробнее о сценариях — в статье «Калькулятор для WordPress».

Не нашли ответ?Напишите на hello@qalca.ruНаписать

Другие платформы

Другие движки — в разделе инструкций.

Поставьте калькулятор на WordPress сегодня

Выберите шаблон, поменяйте цены и получите первую заявку с расчётом. 7 дней бесплатно.

Попробовать бесплатно