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

​
Встраивание виджета

Встройте интерактивные планы этажей Gridix на ваш сайт одной строкой кода. Это руководство охватывает создание виджета, конфигурацию и встраивание.

​
Обзор

Виджеты Gridix - это встраиваемые интерактивные планы этажей, которые вы можете добавить на любой сайт. Они включают:
  • Интерактивные планы этажей: Кликабельные макеты квартир
  • Сбор лидов: Встроенные формы запросов
  • Поддержка нескольких языков: Отображение на нескольких языках
  • Адаптивный дизайн: Работает на всех устройствах
  • Настраиваемые: Соответствуют цветам вашего бренда

​
Создание кода виджета

​
Шаг 1: Доступ к генератору виджетов

1

Перейдите в Виджеты

Перейдите на вкладку “Виджеты” в админ-панели.
2

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

Выберите, какой проект встроить:
  • Один проект: Выберите конкретный проект
  • Все проекты: Показать все ваши проекты
3

Настройте язык

Установите язык по умолчанию для виджета:
  • Английский (en)
  • Русский (ru)
  • Грузинский (ka)
  • Арабский (ar)

​
Шаг 2: Создайте код

1

Просмотрите конфигурацию

Проверьте настройки проекта и языка.
2

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

Нажмите “Скопировать код” для копирования кода встраивания в буфер обмена.
3

Код готов

Код готов для вставки на ваш сайт.

​
Структура кода виджета

​
Базовый код встраивания

<div id="gridix-widget-root"></div>
<script src="https://your-domain.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.GridixWidget && window.GridixWidget.init({
      lang: "en",
      projectId: "your-project-id"
    });
  });
</script>

​
Компоненты кода

  • Контейнер Div: <div id="gridix-widget-root"></div> - Где появляется виджет
  • Источник скрипта: Загружает библиотеку виджета Gridix
  • Инициализация: Настраивает виджет с вашими настройками

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

​
HTML сайты

1

Откройте HTML файл

Откройте HTML файл вашего сайта в текстовом редакторе.
2

Найдите точку вставки

Найдите, где вы хотите, чтобы виджет появился.
3

Вставьте код

Вставьте код виджета в желаемое место.
4

Сохраните и опубликуйте

Сохраните файл и опубликуйте на вашем веб-сервере.

​
WordPress

1

Редактируйте страницу/запись

Отредактируйте страницу или запись, где вы хотите виджет.
2

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

Добавьте блок “HTML” или “Пользовательский HTML”.
3

Вставьте код

Вставьте код виджета в HTML блок.
4

Опубликуйте

Опубликуйте или обновите страницу.

​
CMS платформы

Для других CMS платформ (Drupal, Joomla и т.д.):
  • Найдите опцию вставки HTML/кода
  • Вставьте код виджета
  • Сохраните изменения

​
Опции конфигурации виджета

​
Выбор проекта

// Один проект
projectId: "your-project-id"

// Все проекты (для застройщиков)
userId: "your-user-id"

​
Конфигурация языка

lang: "en"  // Английский
lang: "ru"  // Русский
lang: "ka"  // Грузинский
lang: "ar"  // Арабский

​
Дополнительные опции

window.GridixWidget.init({
  lang: "en",
  projectId: "project-id",
  theme: "light",        // Светлая или темная тема
  showControls: true,    // Показать элементы управления масштабированием/панорамированием
  enableSearch: true     // Включить поиск квартир
});

​
Предпросмотр виджета

​
Тестирование перед встраиванием

1

Создайте код

Создайте код виджета в админ-панели.
2

Нажмите Предпросмотр

Нажмите кнопку “Предпросмотр” для просмотра вида виджета.
3

Просмотрите виджет

Проверьте:
  • Отображение плана этажа
  • Интерактивные функции
  • Настройки языка
  • Адаптивность для мобильных устройств
4

Внесите корректировки

Вернитесь к настройкам для корректировки при необходимости.

​
Функции предпросмотра

  • Полное отображение виджета: Увидите точный внешний вид виджета
  • Интерактивное тестирование: Протестируйте все функции виджета
  • Мобильный предпросмотр: Проверьте адаптивность для мобильных устройств
  • Переключение языка: Протестируйте отображение языка

​
Многоязычные виджеты

​
Поддержка языков

Виджеты поддерживают несколько языков:
  • Английский (en): Язык по умолчанию
  • Русский (ru): Русский интерфейс
  • Грузинский (ka): Грузинский интерфейс
  • Арабский (ar): Арабский интерфейс (поддержка RTL)

​
Переключение языка

Настройте язык в коде виджета: 
lang: "en"  // Установите язык по умолчанию
Клиенты могут переключать языки, если вы включите переключатель языка в настройках виджета.

​
Настройка виджета

​
Опции стилизации

При встраивании виджеты можно настроить с помощью CSS: 
#gridix-widget-root {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

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

Установите размеры виджета: 
<div id="gridix-widget-root" style="width: 100%; height: 600px;"></div>

​
Устранение неполадок

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

  • Проверьте, что URL скрипта правильный
  • Проверьте консоль браузера на ошибки
  • Убедитесь, что контейнер div существует
  • Проверьте, что ID проекта правильный
  • Проверьте, что проект опубликован
  • Убедитесь, что проект имеет планы этажей
  • Проверьте интернет-соединение
  • Очистите кеш браузера
  • Проверьте, что формы лидов включены
  • Проверьте конфигурацию виджета
  • Просмотрите настройки проекта
  • Протестируйте отправку формы

​
Лучшие практики

Тестируйте перед публикацией: Всегда предварительно просматривайте виджет перед встраиванием на рабочий сайт.
Адаптивный дизайн: Убедитесь, что контейнер виджета адаптируется к разным размерам экрана.
Производительность загрузки: Виджет загружается асинхронно и не блокирует отрисовку страницы.
Безопасность: Код виджета безопасен и не требует дополнительных мер безопасности.

​
Расширенное использование

​
Несколько виджетов

Встройте несколько виджетов на одной странице: 
<!-- Первый проект -->
<div id="gridix-widget-root-1"></div>
<script>
  window.GridixWidget && window.GridixWidget.init({
    containerId: "gridix-widget-root-1",
    projectId: "project-1-id",
    lang: "en"
  });
</script>

<!-- Второй проект -->
<div id="gridix-widget-root-2"></div>
<script>
  window.GridixWidget && window.GridixWidget.init({
    containerId: "gridix-widget-root-2",
    projectId: "project-2-id",
    lang: "en"
  });
</script>

​
Динамическая загрузка

Загрузите виджет динамически с помощью JavaScript: 
function loadGridixWidget(projectId, containerId) {
  const container = document.getElementById(containerId);
  if (!container) return;
  
  const script = document.createElement('script');
  script.src = 'https://your-domain.com/widget.js';
  script.onload = function() {
    window.GridixWidget.init({
      containerId: containerId,
      projectId: projectId,
      lang: "en"
    });
  };
  document.head.appendChild(script);
}

​
Следующие шаги