Кейс: Живая интерактивная карта на Тильде, управляемая из Битрикс24 через n8n

Продажа загородной недвижимости - это бизнес, где визуализация решает всё. Когда клиент заходит на сайт коттеджного поселка, он хочет видеть генплан: где находится участок, кто соседи, далеко ли лес. Но в 90% случаев компании размещают на сайте обычную статичную картинку (JPEG или PDF). Это рождает массу проблем.

Проблема: «Мертвая» карта и двойные бронирования

К нам обратился девелопер коттеджного поселка. У них был красивый лендинг на Тильде с генпланом (статическая картинка), но бизнес-процесс страдал от «человеческого фактора»:

• Менеджерам приходилось вручную отмечать проданные участки в Excel.
• Чтобы обновить карту на сайте, нужно было каждый раз просить дизайнера перерисовать картинку, а верстальщика - залить её на Тильду. Это делалось раз в неделю.
• Из-за рассинхрона клиенты часто оставляли заявки на участки, которые были проданы еще вчера. Менеджеры тратили время на извинения и попытки «перепродать» другой вариант.

Задача: Сделать генплан интерактивным. Карта должна сама понимать, какие участки свободны (зеленые), какие в брони (желтые), а какие проданы (красные). И главное - она должна получать эти данные напрямую из CRM-системы Битрикс24 без участия человека.

Решение: SVG, JavaScript и магия n8n

Шаг 1. Перенос карты в формат SVG (Векторная графика)

Мы отказались от стандартных модулей Тильды и реализовали кастомный HTML/CSS блок (Т123). Взяли скриншот с Яндекс Карт, повысили его качество с помощью нейросети. Поверх него в Figma отрисовали полигоны каждого участка.

Затем мы выгрузили эти полигоны в формате SVG-кода. В результате каждый участок получил свой уникальный ID (например, T-128). С помощью CSS мы настроили красивые эффекты: при наведении мыши (hover) свободный участок подсвечивается ярким зеленым цветом с белой обводкой, провоцируя пользователя кликнуть.

Шаг 2. «Умные» поп-апы с динамическим контентом

Мы написали JavaScript-код, который отслеживает клики по карте. Нам не пришлось создавать 130 разных форм для каждого участка. Скрипт делает следующее:

• Считывает номер участка, на который кликнул клиент.
• Открывает единый поп-ап Тильды (блок BF502N).
• Динамически меняет текст: если участок свободен, выводится сообщение «Участок №X свободен ✅. Зафиксируйте стоимость». Если желтый - «Забронирован ⏳. Встаньте в очередь».
• Подставляет номер участка в скрытое поле (Hidden Field) формы, чтобы менеджер в Битрикс24 сразу видел предмет интереса.

Шаг 3. Интеграция Битрикс24 и Тильды через n8n

Это сердце проекта. Тильда не умеет напрямую «общаться» с Битрикс24 на предмет статусов. Для связи мы развернули на сервере заказчика n8n (мощнейшую no-code платформу для автоматизации).

Как это работает сейчас:

1. Менеджер по продажам в Битрикс24 переводит сделку по участку №128 в стадию «Договор подписан / Продано».
2. Битрикс24 мгновенно отправляет Webhook в n8n.
3. Сценарий n8n обновляет базу данных статусов участков (json-файл), к которой обращается сайт на Тильде.
4. Уже через секунду на сайте посетители видят участок №128 закрашенным в красный цвет. Кликнуть на него и оставить ложную заявку больше нельзя.

«Такая архитектура делает сайт полностью автономным. Отдел продаж работает исключительно в CRM, а сайт "живет" своей жизнью, синхронизируясь с бизнесом в реальном времени. Ноль рутины, ноль ошибок.»

Результаты внедрения

• Конверсия лендинга выросла на 28%. Геймификация и интерактив (водишь мышкой - участки загораются) сильно увеличивают время вовлеченности пользователя.
• Полное исключение невалидных лидов. Отдел продаж больше не тратит время на обработку заявок на проданную землю.
• Экономия денег на поддержке. Заказчику больше не нужно платить веб-мастеру за еженедельное обновление картинки на сайте.