MACRO

Лэндинг на Tilda

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

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

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

  1. Добавьте в поле «Контент» код встраивания виджета перед закрывающим тегом </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>

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

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

#Открытие каталога по определённой кнопке на сайте

Если Вам требуется открыть каталог кликом по ссылке или кнопке на лэндинге (а не по стандартной кнопке каталога), то разместите на кнопке псевдоссылку вида #open_catalog и сохраните изменения.

Создайте на странице новый блок T123

Добавьте код, который будет обрабатывать нажатие по заданной псевдоссылке (при этом предотвращая обработку средствами Tilda)

<script>
  if (document.readyState !== 'loading') {
    us_clickInterception();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterception);
  }

  function us_clickInterception() {
		// "\#open_catalog" — это ссылка на кнопке
    var links = document.querySelectorAll('a[href="\#open_catalog"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function (e) {
					// предотвращение обработчика Tilda
          e.preventDefault()
        macrocrm.initCatalogAndShow({})
        return false
      });
    });
  }
</script>

Проверяете открытие каталога по кнопке!

Если вам требуется открыть каталог с установленными параметрами фильтров, то Вы можете уточнить в строке 15 метод macrocrm.initCatalogAndShow({}) параметрами фильтров как предписано статьей Управление поведением виджетов MACRO через JS SDK.

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

Каталог недвижимости может быть встроен в тело вашего сайта, а не открываться в модальном окне. Пример встраиванияПереход на внешний сайт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>