Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Tilda - популярный конструктор сайтов. Другими словами - рабочий инструмент, чтобы быстро создать сайт, запустить на него платный трафик с рекламных площадок и получать желаемые лиды на покупку и продажу недвижимости. Для создания сайта на Тильде не требуются особые навыки или помощь программиста.

Приветствую! С вами Евгений Диденко, руководитель компании Xoms — сервиса для автоматизации продаж недвижимости. Вместе с вами пройду этот путь. Если появятся вопросы, жду вас в комментариях, там всё решим.

В этом уроке мы пошагово пройдем все процессе и в результате получим готовый к работе сайт. Зарегистрируем и настроим аккаунт на Тильде. Создадим главную страницу. Подключим базу жилых комплексов, чтобы наш посетитель смог сразу подобрать себе объект. Подключим Tilda к amoCRM, чтобы заявки моментально попадали в crm-систему и обрабатывались менеджерами.

Что? Где вы возьмете базу жилых комплексов..? Прекрасный вопрос, который мы решим минуты так за 3. Сейчас всё расскажу, а пока можете заглянуть в будущее и посмотреть на готовый пример лендинга для недвижимости, которое мы сейчас будем делать.

Сайт-лендинг на тильде агентству недвижимости с базой новостроек и интеграций Xoms и amoCRM

Дисклеймер: это не руководство, как создать продающий лендинг с конверсией в 130%. Нет. Это пошаговая инструкция, как создать сайт на тильде с базой новостроек и квартир. И основной акцент мы делаем на технических моментах и инструкциях. Пособий, как написать правильный оффер для продажи квартир или коммерческой недвижимости, в интернете достаточно.

Регистрация на Tilda

Переходим по ссылке. В каждой графе указывает данные: имя, email, пароль и нажимаем “Зарегистрироваться”.

На почту придет приветственное письмо. Нужно подтвердить почту, нажав на соответствующую кнопку.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Шаблон сайта

Шаблон - страница с готовой структурой и цветовым оформлением. Отличный способ быстро создать сайт. Найдем шаблон, который нравится и подходит для компании. Для поиска можно отфильтровать шаблоны по категории или по ключевому слову. Обращаем внимание именно на цвета и структуру, чтобы не тратить время на цветовое оформление. А все изображения и тексты изменим в процессе редактирования. Нажимаем “Выбрать” на подходящем шаблоне.

Далее нас ждет короткий обзор дальнейших действий и видеогид по основным функциям от Тильды. Обязательно почитайте и посмотрите.

Начинаем редактировать.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

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

Главная страница должна отражать суть вашей компании, кто вы, какие услуги предлагаете и почему ими должны воспользоваться.

Для создания главной страницы нам потребуются картинки, немного текста и база жилых комплексов. Всю информацию я вывел в отдельную таблицу, чтобы вам было проще подготовить материал для создания сайта.

Отлично! Совсем немного. Пойдём сверху вниз.

Добавление блока

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

Чтобы добавить новый блок в нужное место, например, между блоками, нажмите на кнопку ( + ).

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

С помощью поиска найдите указанный блок или выберите из категории.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Шапка сайта

Задача шапки сайта предоставить ключевую информацию и ответить на базовые вопросы:

  • что за компания? — размещаем логотип;
  • что найду на странице \ сайте? — меню-навигация;
  • как связаться? — телефон и кнопка обратной связи.

Загружаем наш логотип, укажем название и номер телефона для связи. Меню навигации оставим напоследок, когда будет готова структура страницы.

Название блока: Универсальное меню с логотипом слева.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Главный блок - оффер

Блок с предложением — это первое, что видит посетитель. Если это “теплый” клиент и вы сделали правильно предложение, он без сомнений оставит контакт, закроет сайт и будет ждать звонка. Поэтому с оффером стоит экспериментировать, проводить A\B-тестирование. Пробовать разные формулировки текста предложения и кнопки. Менять фоновую картинку и оформление блока.

Загружаем фоновую картинку роскошного пентхауса с панорамными окнами и видом на город или со счастливой парой, которые радуются покупке квартиры с нашей помощью.

Пишем наше предложение, от которого клиенты не смогут отказаться и добавляем кнопку “Подобрать объект”.

Название блока: Добавьте новый блок из категории “Обложка” на своё усмотрение. Я использовал “Нулевой блок” (Zero Block), то есть созданный \ отредактированный вручную.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Редактирование блока

Каждый блок можно настроить под себя. Изменить размеры, шрифт и фоновую картинку. Добавить кнопки, анимацию или сконвертировать в “Нулевой блок” и получить еще больше возможностей для ручного редактирования.

Нет смысла переписывать в эту статью официальную документацию Тильды, там все очень подробно и доступно расписано. Изучите самостоятельно. А также обязательно посмотрите короткий ролик по работе с блоками и всё станет ещё понятнее.

Создание блоков сайт

Подключение базы жилых комплексов

При нажатии на кнопку “Подобрать объект”, наш посетитель должен иметь возможность подобрать подходящую новостройку. Узнать всю информацию об объекте, инфраструктуре и стоимости квартир. Оставить заявку для получения подробной консультации и подборе квартиры.

Всю информацию по жилым комплексам мы будем отображать с помощью виджета “Каталог жилых комплексов” от сервиса для риэлторов Xoms.

Для этого переходим в личный кабинет Xoms. Проверяем, что у нас заполнена персональная карточка и карточка компании. Настройку Xoms проводили в отдельной статье уроке.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

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

В Xoms переходим в раздел “Виджеты” и создаем свой новый виджет. Выбираем “Каталог жилых комплексов”. И давайте подробнее остановимся на настройках виджета.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Название

Мы будем создавать несколько виджетов с разными настройками. Чтобы быстро ориентироваться, какой виджет за что отвечает, укажем краткое характеризующее название.

Ответственный пользователь

Это пользователь, которому будут приходить заявки, оставленные через форму обратной связи. Здесь правильно выбрать руководителя отдела продаж или сотрудника, который занимается распределением сделок.

Контакты в шапке

Несколько кнопок, которые отвечают за то, какие данные отображать в шапке виджета: телефон, сайт, соц. сети и др. Напомню, что данные вы заполняли ранее в настройке компании.

Фильтрация данных

Если нужно показывать только определенные жилые комплексы или ЖК, которые удовлетворяют точным параметрам, то в соответствующих полях задаем эти параметры.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Способ запуска

Выбираем, как будут отображаться жилые комплексы:

С кнопки. Кнопка, нажав на которую, на весь экран откроется окно виджета. Можно задать свой текст для кнопки и выбрать цветовое оформление. Или назначить ссылку для запуска на свою кнопку (именно этот вариант мы и будем использовать).

Встроенный блок. На странице будут размещен дополнительный блок заданных размеров. В этом блоке будут отображаться все данные.

Код виджета

Для создания виджета нажмите “Сохранить”. Появится дополнительный блок “Код виджета”. Этот код отвечает за вызов нужных нам данных. Скопируем его, чтобы разместить на нашем сайте. Код ссылки укажем следующей.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Подключение тарифа Тильды

Чтобы подключить дополнительные html-блоки нужны подключить один из платных тарифов на ваш выбор. Дополнительно будет доступно привязка собственного доменного имени и множества других полезных функций.

Выбираем пункт меню “Ещё” - “Тарифы и оплата”. Жмём “Активировать”.

Отлично. Теперь доступны новые возможности.

Подключение телефона

Чтобы использовать html-блоки со своим кодом, Тильда требует добавления в аккаунт номера телефона. Добавить телефон можно в своем Профиле.

Добавление виджета Xoms на сайт Tilda

Внизу страницы создаем новый блок “HTML-код”

Для нового блока нажимаем “Контент” и вставляем скопированный код. Сохраняем.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Теперь для нужной кнопки (или нескольких) назначим запуск виджета. Для этого вернемся в хомс и скопируем текст для ссылки.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

В тильде в блоке с кнопкой жмем “Контент” и в поле “Ссылка для кнопки” вставляем скопированный код.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Опубликуем сайт и посмотрим, как всё работает.

Отлично. Страница открывается, как мы и планировали. Нажмите кнопку “Подобрать объект”. Появилось окно от Xoms с базой жилых комплексов.

С помощью простого фильтра, посетитель сможет посмотреть базу новостроек, когда у него появятся вопросы, он сможет с нами связаться.

В шапке сайта есть телефон и форма для обратной связи. Также форма для обратной связи есть на каждой странице жилого комплекса. Клиент заполняет контактную информацию, выбирает удобный способ связи и отправляет заявку. Заявка моментально попадает на ответственного менеджера и ответственный менеджер получает об этом уведомление.

Другие виджеты Xoms

Каталог квартир и другие виджеты Xoms можно создать и разместить на своем сайте аналогичным способом.

Настройка интеграции Tilda и amoCRM для формы обратной связи

Главная задача сайта - получить контакты посетителя. Для удобства клиента мы добавим формы обратной связи.

Одну форму сделаем, как самостоятельный блок. С фотографией сотрудника и оффером. Другую форму мы сделаем скрытой, она будет вызываться только при нажатии на кнопку.

Все формы подключим к amoCRM. Заявки сразу будут попадать в нужную воронку crm-системы и обрабатываться менеджерами.

Добавление формы обратной связи

Добавим новый блок. Из категории “Форма и кнопка” или с помощью поиска по запросу “Форма” выберем желаемый блок. Я использовал “Изображение и форма в двух колонках”. Добавили. Жмём кнопку “Контент” для редактирования. Загружаем изображение (фото сотрудника). Прописываем “Заголовок”, “Описание” и т.д.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Сама форма состоит из двух полей “Имя” и “Телефон”.

Поле Имя

Выбираем тип “Имя”. Прописываем подсказку. Имя переменной не заполняем. Признак “Обязательно для заполнения” на ваше усмотрение, я не установил.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Поле Телефон

Выбираем тип “Телефон”. Подсказка “Ваш телефон”. Имя переменной тоже не заполняем. Тип маски выбираем “Автоматическая маска с кодом страны”. И поле обязательно для заполнения.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Жмем “Сохранить и закрыть”

Всплывающая форма обратной связи

Чтобы посетитель мог в любой момент оставить заявку на получение консультации, добавим всплывающую форму и привяжем её запуск к нескольким кнопкам. Так мы избежим лишней нагрузки на интерфейс и сохраним функциональность.

Добавьте новый блок “Popup: форма с множеством полей”. Нажмите “Контент” для редактирования формы. Заполним поля “Заголовок” и “Описание”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

В блоке “Поля для ввода” добавим два поля: “Имя” и “Телефон”. Для поля телефон установим “Тип маски” - “Автоматическая маска с кодом страны” и поставим галочку “Обязательно для заполнения”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Чтобы форма запускалась, при нажатии на кнопку, нужно скопировать код “Ссылки на popup”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

И для нужной кнопки вставить код в поле “Ссылка”. Это может быть кнопка “Перезвоните мне” в главном меню страницы. Можно назначить на кнопку в блоке “Наши услуги”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Отлично. Теперь опубликуйте сайт и проверьте работу формы.

Подключение Tilda к amoCRM

В прошлом уроке мы подробно разбирали, как настроить amoCRM для агентства недвижимости. То есть настроенный аккаунт amoCRM у нас уже, его и будем использовать для подключения к Tilda.

На нашем сайте в Тильде заходим в Настройки сайта → Формы и выберите пункт «AmoCRM».

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM
Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Жмем кнопку “Подключить amoCRM”

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Выбираем нужный аккаунт amoCRM и жмем “Разрешить”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Заключительные настройки.

Тип сделки - в какую воронку и на какой этап будут попадать заявки с сайта. Этот сайт у нас для новостроек, поэтому заявки будут приходить в воронку “Покупка квартиры в новостройке”, на начальный этап “Первичный контакт”. Так менеджеру сразу будет поставлена задача связаться с клиентом.

Ответственный - кто по умолчанию будет ответственным по сделке. Здесь выбираем РОПа или сотрудника, который распределяет заявки по менеджерам.

Тема заявки - можно указать понятную вам, например, “С Тильды по ЖК”. Можно использовать предложенные переменные, чтобы сделки были с индивидуальными названиями. Хороший вариант предлагает сама тильда:

здесь есть уникальный номер заявки, с какой формы она отправлена и с какого сайта. Одно из правил ведения crm-системы - изменение названия заявки после классификации клиента (но об этом в другом уроке).

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Дополнительные блоки

Добавляем дополнительные блоки: процесс работы форма, гарантии, отзывы, контактные данные и тд.

Блок “Наши услуги”

Название блока “Карточки с появлением информации при наведении”.

На кнопку “Купить” добавляем вызов виджета Xoms с жилыми комплексами.

На кнопку “Продать” добавляем вызов модального окна с формой обратной связи.

Блок “О компании”

Название блока “Колонки с цифрами на фоновым изображении”

Блок “Отзывы”

Название блока “Слайдер с отзывами на обложке”

Блок “Карта и контакты”

Рассмотрим подробнее добавление блока с контактами и картой. И первое, что сделаем - добавим блок “Карта Google или Яндекс и блок контактов”. Нажмем “Контент” для редактирования.

С текстовой частью всё достаточно очевидно. Заполним поля: заголовок, описание и текст. В них телефон, часы работы, адрес, ссылки на соцсети и другую информацию, чтобы нас было проще найти.

А вот на части с картой остановимся подробнее. Если вы из России, выбираем источник карты Yandex.Maps.

Чтобы карта работала мы должны указать ключ для maps api (для карты Google тоже). Где же взять этот ключ?

Заходим в кабинет разработчика и нажимаем “Подключить API” (у вас должна быть почта на яндексе).

Выбираем тип ключа «JavaScript API и HTTP Геокодер». И нажимаем “Продолжить”.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Заполняем форму и жмем продолжить. На последнем шаге создания API-ключа указываем название. Откроется страница с нашим ключом. Скопируем его.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

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

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Добавим точку на карте, где расположен офис. Пропишем заголовок точки и описание.

Укажем координаты точки. Можно воспользоваться встроенным способом поиска на карте, но почему-то сервер не мог обработать мой запрос. Поэтому покажу, как добавить точки вручную. В яндекс.карте пишем адрес офис и копируем координаты.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Возвращаемся в тильду и указываем значения в полях широты и долготы.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Сохраняем блок и публикуем изменения на сайте.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Блок “Футер”

Название блока “Панель с логотипом, главными и второстепенными пунктами меню”

Якорная ссылка

Прекрасно! Мы создали все блоки для нашей странице. Вернемся немного выше, точнее в самый верх. У нас здесь есть меню навигации по странице. Для каждого пункта меню мы назначим свою якорную ссылку.

Якорная ссылка - это закладка с уникальным именем на странице. Нужна чтобы быстро переходить к нужному разделу.

Между главным блоком и блоком “Наши услуги” добавим новый блок. Название блока “Якорная ссылка”. Добавим. Нажмем “Контент” и укажем “Имя якорной ссылки” - “service”. Сохраним.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Замечательно:) Теперь для любой сможем указать в ссылке адрес этого якоря. В верхнем блоке меню нажмем “Контент” и в разделе “Список пунктов меню” для пункта “Купить” укажу “service”. Да и обратите внимание, что перед названием якоря ставится знак решетки “#”. Сохраняем.

Для остальных блоков при необходимости делаем аналогично. Главное указывать разные имена якорей.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Плавный скролл к блоку

Чтобы переход к блоку по якорной ссылке был плавным и приятный глазу, добавим еще один технический блок под названием “Плавный скролл до локальной якорной ссылки”.

SEO и метаданные

В заключении нам нужно сделать несколько штрихов, которые придадут сайту техническую огранку. Чтобы в поисковиках сайт и в социальных сетях сайт находился и красиво отображался добавим метаданные.

Нажимаем кнопку “Настройки”.

Главное

Заполняем:

Заголовок” - название нашего сайта. Здесь можно вписать не только название агентства недвижимости, но и главное ключевое слово. Например: “Премиальные квартиры в новостройках Москвы без комиссии - АН TopPrimeEstate”.

Описание” - короткое описание деятельности вашего АН, можно перефразировать ключевой оффер и добавить ключевые слова. Например: “Купить квартиру бизнес и премиум класса в центре Москвы от застройщика и без комиссии: бесплатный подбор и получении ипотеки”.

Важно: не увлекайтесь с ключевыми словами, пишите для клиента.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Соцсети и SEO

На вкладках “Соцсети” и “SEO” посмотрите, как будет отображаться сайт в постах Facebook (и др) и в результатах поисковика. При необходимости можете изменить настройки отображения, задав другие значения.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

Публикация сайта

Поздравляю вас, сайт готов! :)

Давайте его скорее опубликуем и начнем работу с клиентами.

Как сделать сайт-лендинг на тильде агентству недвижимости с базой новостроек Xoms и интеграций с amoCRM

И напоследок

Вы проделали большую работу. Самостоятельно создали сайт агентства недвижимости для получения клиентов на покупку недвижимости. Подключили crm-систему amoCRM и добавили виджет с базой жилых комплексов от Xoms.

Обязательно сохраните ссылку на этот урок в закладках (нажмите клавиши Ctrl+D) и разместите ссылку на свой странице соцсети, чтобы быстро найти эту инструкцию и добавить новую страницу для сайта или создать новый.

Уверен, у вас всё получилось:) Пришлите свои работы мне или оставьте ссылку на них в комментариях. Очень интересно посмотреть результаты.

Если возникли вопросы, не стесняйтесь и спрашивайте. Будем вместе помогать вам.

6
5 комментариев

Евгений, огромная благодарность Вам за этот контент!
Я UX/UI дизайнер и могу создать классный сайт, и для меня ценна была техническая часть подключения Хомс и AmoCRM к Тильде.

У меня возникли такие вопросы:
1. Правильно ли я поняла, чтобы подключить Хомс к Тильде, amoCRM не нужна? Она играет доп. функционала для распределения заявок между менеджерами, да?
2. Можно ли открывать виджеты Хомс из Тильды с предустановленными параметрами (фильтрами)?
Например, по разным кнопкам из Тильды открывать "Аренда загородной недвижимости" и "Продажа новостроек"? Если да, как это можно сделать?
3. Если в Хомс возможность показывать на карте расположения объекта недвижимости (и/или одновременно несколько объектов)? Из Тильды будет видна эта карта для посетителя сайта?

Буду Вам очень благодарна за ответы, Евгений!

1
Ответить

Оксана, спасибо за внимание к материалу и обратную связь - очень ценно.

1. Да, совершенно верно. Xoms - самостоятельный сервис. Для подключения к Тильде достаточно зарегистрироваться в Xoms и можно сразу создать виджеты с ЖК и объектами.
А Xoms + amoCRM в связке дают усиливающий друг друга эффект.

2. Да, есть встроенные фильтры, которыми можно корректировать выдачу.
Если каких-то параметров не хватает, обратитесь в нашу поддержку, коллеги помогут всё настроить.
https://photo-screen.ru/i/ytR8R1sol

3. Да, можно задать вид отображения на карте. Можно использовать Яндекс.Карту для объектов в России или Google.Map для зарубежных объектов.
https://photo-screen.ru/i/BeS1GvaHb

Будем благодарны вам за обратную связь по функционалу и за пожелания в его доработке. Развиваем Xoms ориентируясь на пожелания наших пользователей.

! У нас есть очень щедрая партнерская программа. Вы можете получать дополнительный доход, оформляя лицензии Xoms для ваших клиентов.

Также обратите, пожалуйста, внимание на возможность создать индивидуальные странички для брокеров
https://xoms.ru/vc

Ответить

Deleted

Ответить