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