Верстальщику

Эта инструкция — для web-разработчика, которому заказчик передал два сниппета SmartGenPlan и попросил встроить их на сайт. Здесь описана техническая часть: куда вставлять, как влиять на ширину, что делать с разрешёнными доменами.

Что вы получаете от заказчика

Сниппет карты — один тег <script>
Сниппет формы — <div> плюс один тег <script>
Slug проекта — идентификатор, уже зашит в обоих сниппетах
(Опционально) Список разрешённых доменов — заказчик их вбил в редакторе
(Если форма в полном режиме) URL Политики обработки ПД — должен быть на одном из разрешённых доменов

Ваша работа — встроить, отвечать за вёрстку и хостинг сайта.

Сниппеты

Карта

<link rel="preconnect" href="https://embed.smartgenplan.ru">
<script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async fetchpriority="high"></script>

<link rel="preconnect"> запускает DNS+TCP+TLS handshake к нашему хосту в фоне, пока браузер парсит остальную страницу.

async снимает блокировку парсера — остальная часть страницы рендерится не дожидаясь загрузки нашего скрипта.

fetchpriority="high" поднимает приоритет async-скрипта (по умолчанию Low) до уровня CSS и шрифтов. Без него на странице с большим количеством сторонних ресурсов (Tilda, конструкторы, аналитика) наш скрипт встанет в конец очереди и cold-start уезжает в 5-7 секунд. Поддерживается Chrome 102+, Edge 102+, Firefox 132+, Safari 17.2+ (старые браузеры просто игнорируют атрибут).

embed.smartgenplan.ru — стабильный публичный фасад. То что за ним внутри (распределение по серверам, CDN, регионам) может меняться без вашего вмешательства — нам достаточно обновить нашу инфраструктуру.

Поддерживаемые атрибуты:

Атрибут	По умолчанию	Что делает
`data-slug`	— (обязательно)	Идентификатор проекта
`data-height`	`600`	Максимальная высота iframe на десктопе, в пикселях
`data-mobile-height`	`400`	Максимальная высота на мобильных, в пикселях
`data-max-width`	без ограничения	Максимальная ширина iframe в пикселях (явное число)
`data-fullwidth`	`true`	Если `false` — ограничить ширину дефолтным значением 1200px (то же что `data-max-width="1200"`). Используется в редакторе для чекбокса «Ограничить шириной контейнера»
`data-domain`	derived from script src	Явное переопределение домена iframe. По умолчанию embed.js строит iframe URL на том же хосте откуда сам загружен — что обычно правильно.

Форма

<div id="sgp-booking-form" data-slug="87e641fd"></div>
<script src="https://forms.smartgenplan.ru/loader.js" async></script>

Скрипт находит <div> по id, тянет конфигурацию формы и рендерит её внутри этого <div>. Атрибут data-slug обязателен.

Где разместить на странице

Карта

Карта по умолчанию занимает 100% ширины родительского контейнера. То есть результат зависит от того, в какой блок вы её встроите.

Карта во всю ширину экранаКарта в колонке текстаКарта фиксированной ширины

Вынесите embed в секцию во всю ширину, без ограничения по max-width.

<section class="map-section">
  <div class="container">
    <h2>Генплан</h2>
    <p>Кликните по участку, чтобы увидеть детали</p>
  </div>
  <div class="map-panel">
    <script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async></script>
  </div>
</section>

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.map-panel { /* без max-width — растянется на 100vw */ }

Карта получит ширину окна браузера. Этот паттерн используется на главной smartgenplan.ru/demo/.

Просто вставьте сниппет внутрь основного контейнера.

<div class="container">
  <h2>Генплан</h2>
  <script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async></script>
</div>

Карта станет шириной колонки. Если хотите ограничить ещё сильнее — добавьте data-max-width="800".

<div style="text-align: center;">
  <script src="https://embed.smartgenplan.ru/embed.js"
          data-slug="87e641fd"
          data-max-width="900"
          async></script>
</div>

Embed-скрипт не «выламывается» из родительского контейнера

Если сайт сделан с центральной колонкой .container { max-width: 1200px }, и вы вставите embed внутрь — карта не станет шире 1200px. Это сознательное поведение: вёрстка решается на стороне сайта, а не embed-скрипта.

Конфликт со смус-скроллом (Lenis, Locomotive, GSAP ScrollSmoother)

Если на сайте подключена библиотека плавного скролла (Lenis, Locomotive Scroll, GSAP ScrollSmoother), и при наведении курсора на пустые области рядом с картой страница «дёргается» на 100-300px — это известный конфликт. Эти библиотеки перехватывают wheel-события на уровне document и интерполируют скролл через requestAnimationFrame. На прозрачных зонах вокруг iframe это конфликтует с зумом карты.

Два решения, на выбор:

Убрать библиотеку плавного скролла. Анимации (parallax, reveal, fade-in, GSAP ScrollTrigger) работают и без неё — нативный браузерный скролл достаточно плавный, особенно на macOS и iOS.
Ограничить карту шириной — добавить атрибут data-fullwidth="false":
```
<script src="https://embed.smartgenplan.ru/embed.js"
        data-slug="87e641fd"
        data-fullwidth="false"
        async></script>
```
Карта сожмётся до 1200px и центруется. Прозрачных зон по бокам, на которых перехватывается wheel, больше нет — конфликт пропадает.

Атрибут data-lenis-prevent не помогает

Lenis перехватывает события на уровне document, поэтому атрибут на конкретном элементе игнорируется при динамически создаваемом DOM. Только два варианта выше.

Форма

Форма не имеет проблемы с шириной — она встраивается в <div> и занимает 100% его ширины. Желательная максимальная ширина — около 480px (форма так выглядит лучше всего на любых экранах).

<section class="booking">
  <div class="container">
    <h2>Оставить заявку</h2>
    <div id="sgp-booking-form" data-slug="87e641fd"></div>
    <script src="https://forms.smartgenplan.ru/loader.js" async></script>
  </div>
</section>

#sgp-booking-form { max-width: 480px; margin: 0 auto; }

Разрешённые домены — что нужно знать

Если заказчик настроил «Разрешённые домены» в редакторе, форма работает только на этих доменах. На остальных посетитель увидит заглушку с кнопкой «Перейти на сайт владельца».

Проверьте:

Сайт открывается по тому же адресу, что указан у заказчика. Если в редакторе mysite.ru, а сайт открывается по www.mysite.ru — попросите заказчика добавить и тот, и другой вариант.
Если сайт работает на нестандартном порту (например, mysite.ru:8080) — порт в имени домена не учитывается, проверка по hostname.

Полный режим формы — ваша часть работы

Если заказчик выбрал полный режим (с согласиями на ПД), вам нужно сделать одну вещь: опубликовать на сайте Политику обработки ПД по тому URL, который заказчик указал в редакторе (поле privacyUrl).

Например, если заказчик указал https://mysite.ru/privacy — у вас на сайте по этому URL должна открываться страница с текстом политики. Если страницы нет (404) или она лежит на другом домене — форма автоматически переключится в простой режим (защита от подмены).

Содержание Политики — ответственность заказчика. Ваша задача — разместить её по правильному URL.

Гибкая вёрстка — пример полной страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>КП Сосны</title>
  <style>
    body { margin: 0; font-family: Inter, sans-serif; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .map-section { padding: 64px 0; }
    .map-panel { margin-top: 32px; /* без max-width — карта на всю ширину */ }
    .booking-section { padding: 64px 0; background: #f8fafc; }
    #sgp-booking-form { max-width: 480px; margin: 0 auto; }
  </style>
</head>
<body>

  <section class="map-section">
    <div class="container">
      <h2>Генеральный план</h2>
      <p>Выберите участок на карте</p>
    </div>
    <div class="map-panel">
      <script src="https://embed.smartgenplan.ru/embed.js" data-slug="87e641fd" async></script>
    </div>
  </section>

  <section class="booking-section">
    <div class="container">
      <h2>Заявка на участок</h2>
      <div id="sgp-booking-form" data-slug="87e641fd"></div>
      <script src="https://forms.smartgenplan.ru/loader.js" async></script>
    </div>
  </section>

</body>
</html>

Что вы НЕ настраиваете

Задача	К кому
Какие участки нарисованы на карте, их статусы и цены	Заказчик в редакторе
Какие поля в форме, текст согласий, режим (простой/полный)	Заказчик в редакторе
Список разрешённых доменов	Заказчик в редакторе
Если карта или форма не грузится (404)	Поддержка SGP
Если поменялся внешний вид формы и нужны мелкие правки CSS	Заказчик через редактор, не вы

Частые случаи

Карта показывает белый фон / не загружается

Откройте DevTools → Network. Найдите запрос iframe на embed.smartgenplan.ru/p/<slug> (этот хост — стабильный фасад для embed-сниппета, ставится с 29.04.2026). Если 404 — slug неверный, уточните у заказчика. Если 200, но карта не появляется — проверьте консоль на ошибки CSP/CORS, может конфликтовать политика безопасности сайта.

Форма показывает «Бронирование принимается на сайте владельца проекта»

Это означает что текущий домен не входит в разрешённые. Сравните window.location.hostname (адрес в браузере) со списком, который дал заказчик. Если домен правильный — попросите заказчика проверить запись в редакторе (с www или без, регистр, опечатки).

Форма показывает «Форма не настроена»

Заказчик не включил публикацию формы для этого проекта. Передайте ему этот симптом — он включит и переопубликует.

Меняю CSS, но iframe-карта не реагирует на стили

Карта живёт внутри <iframe> — её внутренние стили недоступны снаружи. Влиять можно только на размер и положение самого iframe (через атрибуты embed-скрипта или CSS родительского контейнера).

Хочу постоянную ссылку «Заказать звонок» которая открывает форму поверх карты

Это паттерн «модальное окно». Сделайте обычный <button>, который показывает скрытый <div> с формой. Внутри <div> — стандартный сниппет формы. Loader среагирует на появление <div> в DOM (если уже загружен) или дождётся его — но проще загружать форму сразу при открытии страницы и просто показывать/прятать модал.