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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заполняем:

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

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

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

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

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

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

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

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

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

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