Перейти к содержанию

Встраивание в Tilda

Tilda — частый случай для застройщиков. Здесь — пошагово, как добавить карту и форму на сайт.

Карта на всю ширину страницы

Карту лучше делать на всю ширину — чтобы посетителю было видно весь генплан, без боковых полей.

  1. В нужной странице Tilda нажмите «Добавить блок» → найдите «Другое» → «Zero Block».
  2. В Zero Block нажмите «Контент» → «Добавить элемент» → «HTML» (Embed Code).
  3. Вставьте код карты, который дал вам редактор SmartGenPlan (раздел Публикация → кнопка «Опубликовать» → блок «Код для сайта»).
  4. Откройте настройки Zero Block (значок шестерёнки сверху) → «Параметры блока».
  5. В поле «Ширина» выберите «All width» (вся ширина окна браузера).
  6. Сохраните, опубликуйте страницу.

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

Форма заявки

Если используете встроенную форму SmartGenPlan — отдельная страница с формой:

  1. Создайте отдельную страницу в Tilda — например с адресом /booking.
  2. Добавьте на неё блок T123 (HTML) или Zero Block с HTML-элементом.
  3. Скопируйте код формы из редактора (раздел Интеграции → Форма заявок).
  4. Вставьте код в HTML-блок Tilda.
  5. Опубликуйте страницу.
  6. Откройте опубликованную страницу https://my-site.com/booking/, скопируйте полный URL из адресной строки.
  7. Вернитесь в редактор SmartGenPlan → Публикация → Кнопка действия → способ «Открыть страницу» → вставьте этот URL → отметьте галку «На этой странице у меня встроена форма SmartGenPlan».

Подробнее про форму →

Если на сайте плавная прокрутка (Lenis, smooth-scroll)

Некоторые шаблоны Tilda и кастомные сборки используют Lenis или другие smooth-scroll библиотеки. Они могут конфликтовать с режимом «полноэкранная карта» в SmartGenPlan — клик по «развернуть на весь экран» не работает корректно.

Решение — добавить атрибут data-fullwidth="false" к контейнеру карты:

  1. В Zero Block с картой откройте HTML-элемент.
  2. В обёртке карты (внешний <div>) добавьте атрибут: 
    <div data-fullwidth="false">
  <!-- ваш код карты от SmartGenPlan -->
</div>
  3. Сохраните.

Это отключает наш встроенный фуллскрин-режим — карта остаётся в рамках Zero Block, без конфликта со smooth-scroll. Кнопка «развернуть» исчезнет, но базовая навигация по карте (zoom, перетаскивание, клик по участку) сохраняется.

Что проверить после публикации

  • На десктопе: открыть карту, кликнуть на участок — должно открыться окно с информацией. Нажать кнопку действия — должна перейти на форму или контакт.
  • На мобильном: карта помещается на экран, можно увеличивать пальцами, тапнуть на участок открывает окно.
  • Если форма SmartGenPlan: отправить тестовую заявку — должна прийти на email указанный в настройках формы.

Если что-то пошло не так

  • Карта не показывается — проверьте что код вставлен полностью, без обрыва. Проверьте раздел Решение проблем.
  • Карта обрезана с боков — Zero Block не выставлен на «All width».
  • Кнопка «развернуть» не работает — добавьте data-fullwidth="false" (см. выше).
  • Форма пишет «Не настроена» — в редакторе SmartGenPlan не указан email доставки или ваш домен Tilda не добавлен в «Разрешённые домены».