# Лэндинг на Tilda

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

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

#### Шаг №1

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

![](https://help.macrodigital.ru/upload/pages/manual/macrocatalog/ustanovka_na_sait/471/macrocatalogtilda/mc-tilda-1.png)

#### Шаг №2

<figure><img src="https://2409287958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfkymnT1WRuXnrJRm6ZIO%2Fuploads%2Fq7ztvKjU7BMfTqyGwBRo%2Fmc-tilda-2.png?alt=media&#x26;token=facd8627-f924-4b3c-a669-13ad99ef069f" alt=""><figcaption></figcaption></figure>

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

Код встраивания, если система MACRO установлена на [macroserver.ru](https://macroserver.ru/)

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

Код встраивания, если система MACRO установлена на [macro.sbercrm.com](https://macro.sbercrm.com)

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

Код встраивания, если система MACRO установлена на [macroserver.kz](https://macroserver.kz)

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

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

<table><thead><tr><th width="169">Имя параметра</th><th width="216">Возможные значения</th><th>Описание</th></tr></thead><tbody><tr><td><strong>data-autoinit</strong></td><td><strong><code>true</code></strong> или <strong><code>false</code></strong></td><td>Инициализация виджета при запуске страницы с кодом, если требуется <mark style="background-color:yellow;"><strong>быстрая загрузка каталога недвижимости</strong></mark> при клике на кнопку</td></tr><tr><td><strong>data-autoshow</strong></td><td><strong><code>true</code></strong> или <strong><code>false</code></strong></td><td>Инициализация и запуск виджета при запуске страницы с кодом, если требуется сразу запускать виджет при переходе на страницу</td></tr><tr><td><strong>data-iframemode</strong></td><td><strong><code>true</code></strong> или <strong><code>false</code></strong></td><td>Используйте для принудительной<br>установки виджета в режиме<br>iframe<br>Настройка виджетов «Iframe mode»,<br>установленная для домена<br>в системе MACRO, будет<br>игнорироваться</td></tr><tr><td><strong>data-views</strong></td><td>Значения через запятую: <strong><code>facades</code></strong>, <strong><code>floor</code></strong>, <strong><code>bigGrid</code></strong>, <strong><code>smallGrid</code></strong>, <strong><code>plans</code></strong>, <strong><code>objects</code></strong>, <strong><code>description</code></strong>, <strong><code>online</code></strong>, <strong><code>panorama</code></strong></td><td>Список разрешенных видов дома. Если параметр не определен, то разрешены все виды дома</td></tr></tbody></table>

Пример:

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

#### Шаг №3

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

Если кнопка не видна, то убедитесь, что в [настройках виджетов](#user-content-fn-1)[^1] включена «Кнопка запуска каталога». Её внешний вид и расположение Вы также можете отрегулировать по своему вкусу.

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

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

<figure><img src="https://2409287958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfkymnT1WRuXnrJRm6ZIO%2Fuploads%2F7DCcs5dXooJijRYRSGPJ%2Fimage.png?alt=media&#x26;token=97b230b4-8acc-45c2-be72-5d49d1c5368d" alt=""><figcaption></figcaption></figure>

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

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

{% code lineNumbers="true" %}

```javascript
<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>
```

{% endcode %}

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

Если вам требуется открыть каталог с установленными параметрами фильтров, то Вы можете доуточнить в строке 15 метод **`macrocrm.initCatalogAndShow({})`** параметрами фильтров — для этого запросите в <mark style="background-color:yellow;">**своём чате поддержки**</mark> расширенный документ <mark style="background-color:yellow;">**Управление поведением виджетов MACRO через JS SDK**</mark>.

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

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

#### Установка в тело сайта

Создайте на Вашем сайте страницу, на которой будет располагаться каталог. Пример адреса:

```html
https://АДРЕССАЙТА/catalog/
```

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

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

Включите в [настройках виджетов](#user-content-fn-1)[^1] настройку **Iframe mode.**

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

<pre class="language-html" data-overflow="wrap"><code class="lang-html"><strong>&#x3C;iframe src="https://АДРЕССАЙТА/catalog/" frameborder="0" width="100%" style="height: calc(100vh - 100px)">&#x3C;/iframe>
</strong></code></pre>

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

[^1]: Настройки компании — Раздел «Интеграции» — Настройки виджетов нужного вам домена