Встраивание карт и форм — обзор
Этот раздел объясняет, как добавить интерактивную карту проекта и форму заявки на сайт застройщика. Чтобы всё заработало, должны сложиться действия трёх сторон: заказчик настраивает проект в редакторе, его верстальщик добавляет два сниппета на сайт, а поддержка SmartGenPlan обеспечивает работу инфраструктуры.
Кто за что отвечает
Карта ответственности
Если что-то не работает, эта таблица показывает, к кому обращаться.
| Симптом | Кто решает | Что делать |
|---|---|---|
| Карта режется по ширине, не растягивается на весь экран | Верстальщик | Изменить родительский контейнер на сайте: убрать max-width или вынести embed в секцию во всю ширину (примеры ниже) |
| На месте формы написано «Форма не настроена» | Заказчик | Включить публикацию формы в редакторе для этого проекта |
| На месте формы — «Бронирование принимается на сайте владельца проекта» | Заказчик | Добавить домен сайта в список «Разрешённые домены» при настройке формы |
| На месте формы — то же сообщение, но домен правильный | Верстальщик | Проверить, что сайт открывается именно по тому адресу, который указан в разрешённых доменах (с www или без) |
| Карта или форма вообще не грузится (404) | Поддержка SGP | Написать в поддержку |
| На форме при отправке появляется «Форма не настроена: email получателя не указан» | Заказчик | Зайти в редактор → раздел «Форма бронирования» → указать email доставки. Без него форма не отправит заявку (защита от потери лидов) |
| Заявка отправилась, но не пришла на email | Заказчик | Проверить правильность email доставки в настройках формы (опечатки, лишние пробелы). Письмо могло уйти в спам — проверить папку «Спам». Если форма с согласиями на обработку ПД — у посетителя должен быть настроен почтовый клиент (Gmail, Яндекс.Почта, Outlook или системный mail) |
Если карта не растягивается на весь экран
Карта по умолчанию занимает 100% ширины своего родителя. Если родитель ограничен — карта тоже. На сайтах с центральной колонкой текста (паттерн .container { max-width: 1200px }) карту нужно либо вынести из этой колонки, либо построить разметку явно.
Было — карта внутри центральной колонки
<div class="container" style="max-width: 1200px; margin: 0 auto;">
<h2>Генплан</h2>
<link rel="preconnect" href="https://embed.smartgenplan.ru">
<script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async fetchpriority="high"></script>
</div>
Карта будет шириной максимум 1200px, даже если экран 1920px.
Стало — карта вынесена в секцию во всю ширину
<section>
<div class="container" style="max-width: 1200px; margin: 0 auto;">
<h2>Генплан</h2>
<p>Кликните по участку, чтобы увидеть детали</p>
</div>
<div class="map-panel">
<link rel="preconnect" href="https://embed.smartgenplan.ru">
<script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async fetchpriority="high"></script>
</div>
</section>
.map-panel — отдельный блок без max-width, сосед центральной колонки. Карта займёт всю ширину окна. Этот же паттерн используется на главной smartgenplan.ru/demo/.
Подробнее, со всеми вариантами размещения — в инструкции для верстальщика.
Slug — короткий идентификатор проекта (например, 87e641fd). Заказчик получает его после публикации проекта в редакторе. Один и тот же slug используется и для карты, и для формы — это значит, что карта и форма «привязаны» к одному проекту.
Где живут скрипты встраивания
| Назначение | Адрес |
|---|---|
| Скрипт карты | https://embed.smartgenplan.ru/embed.js |
| Скрипт формы | https://forms.smartgenplan.ru/loader.js |
| Данные карты | внутренние, скрыты за embed.smartgenplan.ru |
| Конфиг формы | https://forms.smartgenplan.ru/f/<slug>/form-config.json |
Заказчик и верстальщик с этими URL напрямую не работают — они зашиты в сниппеты и обновляются автоматически. Поддержке SGP эти адреса нужны для диагностики.