MACRO

Сайт застройщика

Поделитесь этой инструкцией с разработчиком Вашего сайта.

#Порядок действий

  1. Зайдите в раздел меню «Компания → Интеграции → Сайты»
  2. Добавьте домен (адрес сайта), на котором планируете размещение каталога недвижимости MACRO
  3. Разместите 2 строки кода встраивания виджета перед закрывающим тегом </body> Вашего сайта.

#Код встраивания

<div class="mcrm-inline-form" data-type="catalog"></div>
<script type="text/javascript">(function (d, w) {var n = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://MACRO_SERVER_ADDRESS/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

где MACRO_SERVER_ADDRESS — адрес MACRO в зависимости от сервера, на котором установлена система, например:

  • api.macroserver.ru
  • api.macro.sbercrm.com
  • api.macroserver.kz
  • api.macroserver.uz

#Дополнительные параметры

Установка данного кода подключит каталог недвижимости на сайт и является минимальной конструкцией, которую Вы можете дополнить следующими параметрами (полный набор параметров в статье Управление поведением виджетов MACRO через JS SDK):

Имя параметраВозможные значенияОписание
data-autoinittrue или falseИнициализация виджета при запуске страницы с кодом, если требуется быстрая загрузка каталога недвижимости при клике на кнопку.
data-autoshowtrue или falseИнициализация и запуск виджета при запуске страницы с кодом, если требуется сразу запускать виджет при переходе на страницу.
data-iframemodetrue или falseИспользуйте для принудительной установки виджета в режиме iframe.

Настройка виджетов «Iframe mode», установленная для домена в системе MACRO, будет игнорироваться.
data-viewsЗначения через запятую: facades, floor, bigGrid, smallGrid, plans, objects, description, online, panoramaСписок разрешенных видов дома. Если параметр не определен, то разрешены все виды дома.

Пример:

<div
class="mcrm-inline-form"
data-type="catalog"
data-views="floor,bigGrid,smallGrid,plans"
data-autoinit="true"
data-autoshow="false">
</div>

#Кнопка запуска каталога

Включите отображение продающей кнопки запуска Вашего каталога. Подробнее в статье Кнопка запуска.

#Внедрение каталога в контент сайта

Каталог недвижимости может быть встроен в тело вашего сайта, а не открываться в модальном окне. Пример встраиванияПереход на внешний сайтhttps://macrocatalog.ru/iframe-example каталога в тело сайта, реализованного в Tilda.

Создайте на Вашем сайте страницу, на которой будет располагаться каталог. Пример адреса: https://YOUR_SITE.COM/catalog/. Использование отдельной страницы рекомендовано, чтобы вы могли использовать ссылку на конкретный объект/дом для рекламы.

На этой странице нужно разместить код встраивания каталога (см. выше). Обязательно задайте параметр data-autoshow со значением true. Пример:

<div class="mcrm-inline-form" data-type="catalog" data-autoshow="true"></div>

Включите в настройках виджетов настройку Iframe mode.

Разместите указанный ниже код в том месте Вашего сайта, в котором предполагается встраивание каталога:

<iframe src="https://YOUR_SITE.COM/catalog/" frameborder="0" width="100%" style="height: calc(100vh - 100px)"></iframe>

Можете использовать более объемную конструкцию, которая добавит виджет в контент сайта с кнопкой перехода в полноэкранный режим:

<script>
  /* ===== НАСТРОЙКИ КАТАЛОГА ===== */
  window.macroCatalogSettings = {
    src: "https://YOUR_SITE.COM/catalog/", /* Адрес страницы с каталогом */  
    title: "Каталог недвижимости COMPANY" /* Название страницы */  
  };
</script>

<style>
  /* ===== НАСТРОЙКИ РАЗМЕРОВ КАТАЛОГА И КНОПКИ fullscreen ===== */
  #macroFullscreenContainer {
    --catalog-height: calc(100vh - 100px); /* Высота каталога */  
    
    /* Кнопка fullscreen */
    --button-size: 48px;         /* Размер круга */
    --icon-size: 20px;           /* Размер иконки */
    --button-color: #C85FA5;     /* Цвет круга */
    --icon-color: #ffffff;      /* Цвет иконки */
    --icon-stroke: 3;           /* Толщина линий иконки */
    --button-x: 50%;            /* Положение по горизонтали */

    /* Расстояние от верха до центра кнопки */
    --button-y: 12px;            /* В обычном режиме */
    --button-y-fullscreen: 32px; /* В полноэкранном режиме */
    
    --fade-duration: 280ms;      /* Длительность анимации*/
    --button-hover-scale: 0.94;  /* Масштаб при наведении, 94% */
    --button-hover-darken: 20%;  /* Затемнение при наведении на кнопку */
  }

  /* ===== ОФОРМЛЕНИЕ ===== */
  #macroFullscreenContainer {
    position: relative;
    width: 100%;
    height: var(--catalog-height);
    min-height: 300px;
    background: #fff;
  }

  #macroCatalogIframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  #macroFullscreenContainer .catalog-fullscreen {
    position: absolute;
    top: var(--button-y);
    left: var(--button-x);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--button-color);
    color: var(--icon-color);
    cursor: pointer;
    appearance: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 6px)) scale(0.9);
    transition:
      opacity var(--fade-duration) ease,
      transform var(--fade-duration) cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Затемнение фона кнопки */
  #macroFullscreenContainer .catalog-fullscreen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fade-duration) ease;
  }

  /* Иконка поверх затемнения */
  #macroFullscreenContainer .catalog-fullscreen svg {
    position: relative;
    z-index: 1;
    display: block;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* В полном экране кнопка всегда видна */
  #macroFullscreenContainer:fullscreen .catalog-fullscreen,
  #macroFullscreenContainer:hover .catalog-fullscreen,
  #macroFullscreenContainer .catalog-fullscreen:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  #macroFullscreenContainer .catalog-fullscreen:focus-visible {
    outline: 2px solid var(--button-color);
    outline-offset: 4px;
  }

  #macroFullscreenContainer:fullscreen {
    height: 100%;
    min-height: 0;
  }

  /* Отдельное положение кнопки в полноэкранном режиме */
  #macroFullscreenContainer:fullscreen .catalog-fullscreen {
    top: var(--button-y-fullscreen);
  }

  /* Эффект при наведении на кнопку */
  @media (hover: hover) {
    #macroFullscreenContainer .catalog-fullscreen:hover {
      transform: translate(-50%, -50%) scale(var(--button-hover-scale));
    }

    #macroFullscreenContainer .catalog-fullscreen:hover::after {
      opacity: var(--button-hover-darken);
    }
  }

  /* На устройствах без возможности наведения курсора на кнопку, она будет всегда видна */
  @media (hover: none) {
    #macroFullscreenContainer .catalog-fullscreen {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }
  }

  /* Эффект при нажатии на кнопку */
  #macroFullscreenContainer .catalog-fullscreen:active {
    transform: translate(-50%, -50%) scale(0.9);
  }

  /* Учитываем системную настройку уменьшения движения */
  @media (prefers-reduced-motion: reduce) {
    #macroFullscreenContainer .catalog-fullscreen,
    #macroFullscreenContainer:fullscreen .catalog-fullscreen,
    #macroFullscreenContainer .catalog-fullscreen:hover,
    #macroFullscreenContainer .catalog-fullscreen:focus-visible,
    #macroFullscreenContainer .catalog-fullscreen:active {
      transition: none;
      transform: translate(-50%, -50%);
    }

    #macroFullscreenContainer .catalog-fullscreen::after {
      transition: none;
    }
  }
  
  /* Скрываем кнопку в полном экране на сенсорных устройствах */
  @media (hover: none) and (pointer: coarse) {
    #macroFullscreenContainer:fullscreen .catalog-fullscreen {
      display: none;
    }
}
</style>

<div id="macroFullscreenContainer">
  <iframe
    id="macroCatalogIframe"
    allowfullscreen
  ></iframe>

  <button
    type="button"
    class="catalog-fullscreen"
    aria-label="На полный экран"
    aria-pressed="false"
  >
    <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false">
      <path d="M12 2H2v10 M20 2h10v10 M2 20v10h10 M30 20v10H20"/>
    </svg>
  </button>
</div>

<script>
(function () {
  const container = document.getElementById("macroFullscreenContainer");
  const iframe = container.querySelector("#macroCatalogIframe");
  const button = container.querySelector(".catalog-fullscreen");
  const iconPath = button.querySelector("path");
  const settings = window.macroCatalogSettings;

  iframe.title = settings.title;
  iframe.src = settings.src;

  const paths = {
    enter: "M12 2H2v10 M20 2h10v10 M2 20v10h10 M30 20v10H20",
    exit: "M12 2v10H2 M20 2v10h10 M2 20h10v10 M30 20H20v10"
  };

  function updateButton() {
    const active = document.fullscreenElement === container;
    const label = active
      ? "Выйти из полного экрана"
      : "На полный экран";

    iconPath.setAttribute("d", active ? paths.exit : paths.enter);
    button.setAttribute("aria-label", label);
    button.setAttribute("aria-pressed", String(active));
    button.title = label;
  }

  button.addEventListener("click", async function () {
    try {
      if (document.fullscreenElement === container) {
        await document.exitFullscreen();
      } else if (container.requestFullscreen) {
        await container.requestFullscreen();
      } else {
        alert("Этот браузер не поддерживает полноэкранный режим.");
      }
    } catch (error) {
      console.error("Ошибка полноэкранного режима:", error);
      alert("Не удалось переключить полноэкранный режим.");
    }
  });

  document.addEventListener("fullscreenchange", updateButton);
  updateButton();
})();
</script>

#Упрощенная установка

Существует упрощённый способ встраивания, который позволяет не создавать дополнительных страниц на Вашем сайте, а открывать каталог с сервера компании MACRO. Но при таком способе будет утеряна возможность получения событий аналитики Яндекс и Google!

Включите в настройках виджетов настройку Iframe mode.

Разместите указанный ниже код в том месте страницы Вашего сайта, в котором предполагается встраивание каталога:

<iframe src="https://SERVER_ADDRESS/demo/catalog/YOUR_DOMAIN" frameborder="0" width="100%" style="height: calc(100vh - 100px)"></iframe>

где SERVER_ADDRESS зависит от адреса Вашего сервера MACRO, а YOUR_DOMAIN— адрес Вашего сайта, указанный в разделе «Инеграции → Сайты» настроек компании

#Управление поведением виджета через JS SDK

Если вам требуется управлять открытием каталога для разных домов и жилых комплексов на одной странице сайта или открыть каталог с установленными параметрами фильтров, то воспользуйтесь информацией из статьи Управление поведением виджетов MACRO через JS SDK