Лэндинг на Tilda · Документация MACRO

#Пошаговая установка

Для установки каталога недвижимости на Landing page, реализованный в Tilda, нужно будет сделать несколько простых шагов.

#Шаг №1

Добавьте на страницу вашего лэндинга блок с кодом T123 «HTML-код».

#Шаг №2

Добавьте в поле «Контент» 2 строки кода, представленные ниже:

Код встраивания, если система MACRO установлена на macroserver.ruПереход на внешний сайтhttps://macroserver.ru/

<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://api.macroserver.ru/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Код встраивания, если система MACRO установлена на macro.sbercrm.comПереход на внешний сайтhttps://macro.sbercrm.com

<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://api.macro.sbercrm.com/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Код встраивания, если система MACRO установлена на macroserver.kzПереход на внешний сайтhttps://macroserver.kz

<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://api.macroserver.kz/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Вы можете дополнить код встраивания следующими параметрами:

Имя параметра	Возможные значения	Описание
data-autoinit	`true` или `false`	Инициализация виджета при запуске страницы с кодом, если требуется быстрая загрузка каталога недвижимости при клике на кнопку
data-autoshow	`true` или `false`	Инициализация и запуск виджета при запуске страницы с кодом, если требуется сразу запускать виджет при переходе на страницу
data-iframemode	`true` или `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>

#Шаг №3

Готово, Вы великолепны! Перезагрузите страницу — и Вы увидите кнопку запуска каталога.

Если кнопка не видна, то убедитесь, что в настройках виджетовНастройки компании — Раздел «Интеграции» — Настройки виджетов нужного вам домена включена «Кнопка запуска каталога». Её внешний вид и расположение Вы также можете отрегулировать по своему вкусу.

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

Если Вам требуется открыть каталог кликом по ссылке или кнопке на лэндинге (а не по стандартной кнопке каталога), то разместите на кнопке псевдоссылку вида #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://АДРЕССАЙТА/catalog/

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

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

Включите в настройках виджетовНастройки компании — Раздел «Интеграции» — Настройки виджетов нужного вам домена настройку Iframe mode.

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

<iframe src="https://АДРЕССАЙТА/catalog/" frameborder="0" width="100%" style="height: calc(100vh - 100px)"></iframe>

где https://АДРЕССАЙТА/catalog/ ссылка на созданную Вами страницу