Перейти к основному содержанию
Виджет GRIDIX на сайте
Виджет GRIDIX позволяет встроить смарт-каталог, интерактивную шахматку, планировки и формы заявок на сайт девелопера или агентства. Посетитель остаётся на вашем сайте, выбирает лот на визуальном плане и отправляет заявку без перехода в отдельный кабинет. Обычно установка занимает несколько шагов: выбрать проект в кабинете GRIDIX, сгенерировать embed-код, вставить его в сайт и проверить работу на десктопе и мобильных устройствах.
Видео: пример работы с проектом GRIDIX. Если у вас есть отдельный ролик про генерацию виджета, лучше использовать его здесь.

​
Самый простой путь

Если вы настраиваете виджет без разработчика, двигайтесь по этому короткому сценарию.
1

Сгенерируйте код в GRIDIX

Откройте раздел виджетов, выберите проект и язык интерфейса.
2

Вставьте код на сайт

Используйте HTML-блок в CMS или передайте код человеку, который отвечает за сайт.
3

Проверьте заявку

Откройте опубликованную страницу как обычный посетитель и отправьте тестовую заявку.

​
Что делает виджет

Виджет переносит ключевые возможности GRIDIX на внешний сайт:
  • Интерактивные планировки: пользователь может выбирать лоты прямо на плане.
  • Сбор заявок: формы обращения встроены в пользовательский сценарий.
  • Несколько языков: интерфейс можно открыть на русском или английском.
  • Адаптивная верстка: виджет работает на разных размерах экрана.
  • Брендирование: контейнер и окружение можно настроить под стиль сайта.

​
Когда использовать виджет

Сайт девелопера

Покажите один проект с шахматкой, планировками и формой заявки прямо на странице жилого комплекса.

Сайт агентства

Разместите подборку проектов или отдельный проект без перехода пользователя в другой интерфейс.

Лендинг проекта

Добавьте интерактивный блок после описания проекта, чтобы пользователь сразу перешёл к выбору лота.

Внутренняя витрина

Используйте виджет на закрытой странице для менеджеров, партнёров или презентаций отдела продаж.

​
Перед началом

Перед установкой проверьте, что:
  • проект опубликован и содержит актуальные планировки;
  • в проекте настроены лоты, цены и статусы доступности;
  • формы заявок включены и ведут лиды в нужный раздел GRIDIX;
  • у вас есть доступ к HTML-коду сайта, CMS-блоку или разработчику сайта.

​
Как получить embed-код

​
Шаг 1. Откройте генератор виджета

1

Перейдите в раздел виджетов

В административном кабинете GRIDIX откройте раздел виджетов.
2

Выберите проект

Укажите, что нужно показать на сайте:
  • один конкретный проект;
  • все проекты девелопера.
3

Выберите язык

Задайте язык интерфейса по умолчанию:
  • русский (ru);
  • английский (en).

​
Шаг 2. Скопируйте код

1

Проверьте настройки

Убедитесь, что выбран правильный проект и нужный язык.
2

Скопируйте embed-код

Нажмите кнопку копирования кода, чтобы получить готовый embed-фрагмент.
3

Вставьте код на сайт

Добавьте код в HTML-страницу, CMS-блок или шаблон сайта.

​
Базовый пример кода

<div id="gridix-widget-root"></div>
<script src="https://your-gridix-domain.com/widget/index.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.GridixWidget && window.GridixWidget.init({
      lang: "ru",
      projectId: "your-project-id"
    });
  });
</script>
В этом коде есть три основные части:
  • Контейнер: <div id="gridix-widget-root"></div> определяет место, где появится виджет.
  • Скрипт: подключает библиотеку виджета GRIDIX.
  • Инициализация: передает настройки проекта и языка.

​
Где взять projectId и userId

  • projectId используется, когда на странице нужно показать один конкретный проект.
  • userId используется, когда нужно показать все проекты девелопера или агентства.
  • Эти значения берутся из кабинета GRIDIX или из готового embed-кода, который сгенерирован в разделе виджетов.
В реальном коде замените your-gridix-domain.com, your-project-id или your-user-id на значения из кабинета GRIDIX.

​
Встраивание на сайт

ПростоПодходит, если в вашей CMS есть блок для вставки HTML-кода.
1

Откройте страницу в CMS

Перейдите к странице, где должен появиться виджет: страница проекта, лендинг или раздел с планировками.
2

Добавьте HTML-блок

Найдите блок с названием “HTML”, “Custom HTML”, “Embed”, “Code” или похожим.
3

Вставьте embed-код

Вставьте код из кабинета GRIDIX, сохраните страницу и откройте предпросмотр.
Некоторые CMS удаляют <script> из обычных текстовых блоков. Если виджет не появился после публикации, вставьте код через HTML/Embed-блок или передайте его разработчику сайта.
Не вставляйте один и тот же контейнер gridix-widget-root несколько раз на одной странице. Если нужно показать несколько виджетов, используйте разные containerId.

​
Настройки для интегратора

Если вы не работаете с кодом, этот раздел можно отправить разработчику вместе с embed-кодом. 
window.GridixWidget.init({
  lang: "ru",
  projectId: "your-project-id"
});

window.GridixWidget.init({
  lang: "ru",
  userId: "your-user-id"
});

window.GridixWidget.init({
  lang: "ru",
  projectId: "project-id",
  showFullProject: true,
  showFloatingButton: true,
  floatingButtonSide: "right",
  floatingButtonBottomOffset: 40,
  floatingButtonSideOffset: 32
});
  • lang: язык интерфейса виджета. Для русской версии сайта используйте ru.
  • projectId: показывает один конкретный проект.
  • userId: показывает все проекты девелопера или агентства.
  • showFullProject: показывает полный проект, если этот режим включён в генераторе.
  • showFloatingButton: включает плавающую кнопку виджета.
  • floatingButtonSide, floatingButtonBottomOffset, floatingButtonSideOffset: управляют позицией плавающей кнопки.

​
Размер контейнера

Задайте контейнеру стабильную ширину и высоту, чтобы страница не прыгала при загрузке: 
<div id="gridix-widget-root" style="width: 100%; min-height: 640px;"></div>

​
Что отправить разработчику сайта

Если виджет будет вставлять разработчик или подрядчик, передайте ему:
  • готовый embed-код из кабинета GRIDIX;
  • адрес страницы, куда нужно добавить виджет;
  • нужный режим отображения: один проект через projectId или все проекты через userId;
  • язык интерфейса: lang: "ru";
  • минимальную высоту контейнера: min-height: 640px;
  • требование проверить тестовую заявку после публикации.

​
Минимальный чеклист перед публикацией

1

Откройте предпросмотр

Используйте preview в кабинете GRIDIX или временную страницу на сайте.
2

Проверьте сценарии

Убедитесь, что планировки открываются, формы заявок работают, а язык выбран корректно.
3

Проверьте мобильную версию

Откройте страницу на телефоне или через responsive preview в браузере.
4

Отправьте тестовую заявку

Проверьте, что заявка появляется в GRIDIX и содержит правильный источник.
После публикации откройте страницу в обычном браузере без авторизации в CMS. Так вы проверите реальный сценарий посетителя сайта.

​
Частые проблемы

Проверьте URL скрипта, наличие контейнера gridix-widget-root, корректность projectId и ошибки в консоли браузера. Частая причина — код вставили в блок, где CMS удаляет <script>.
Убедитесь, что проект опубликован, в нём есть планировки, лоты и доступные данные для отображения.
Проверьте, включены ли формы заявок, правильно ли настроен проект и проходит ли тестовая отправка формы.
Задайте контейнеру минимальную высоту, например min-height: 640px, и проверьте стили родительского блока на сайте.

​
Рекомендации

Перед публикацией всегда проверяйте виджет в preview и на реальной странице сайта.
Используйте lang: "ru" для русской версии сайта, чтобы интерфейс виджета сразу открывался на русском языке.
После публикации проверьте страницу из обычного браузера, а не только из CMS-preview.

​
Что дальше