Руководство по настройке: интеграции с сайтом

1. Перед началом

Тариф Pro. Виджет объявлений, кнопка для жильцов, готовые кнопки, QR-коды и фиды данных входят в RentMerchant Pro. Обычные ссылки и ваша бесплатная страница RentMerchant работают на любом тарифе. Перейти на Pro можно в разделе Оплата вашего аккаунта.
Подтверждённый адрес email. Объявления и виджеты загружаются только для подтверждённых аккаунтов.
Доступ к редактированию вашего сайта. Вам нужна возможность добавить элемент страницы в конструкторе сайта. Некоторые конструкторы разрешают собственный код только на платных тарифах; где именно, указано в разделе инструкции для конструкторов ниже.

2. Найдите свой код

Войдите на app.rentmerchant.com.
Откройте Настройки, затем вкладку Интеграции.
Нажмите на вариант, чтобы открыть его, затем используйте кнопку Скопировать код. Код уже содержит имя вашего аккаунта, поэтому вставляйте его точно в том виде, в каком скопировали.

В примерах на этой странице your-name обозначает имя вашего аккаунта. Всегда копируйте настоящий код со страницы «Интеграции», а не перепечатывайте эти примеры.

3. Добавьте объявления об аренде

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

Откройте Объявления (в разделе «Сдача в аренду»). Там все ваши помещения. Для объекта без помещений отображается кнопка Создать объявление.
Нажмите Изменить у дома и укажите количество спален и ванных, площадь в квадратных футах, ежемесячную аренду, залог, дату, с которой он свободен (оставьте пустым для «свободно сейчас»), правила для животных и описание.
Загрузите до 12 фото. Первое фото становится обложкой; меняйте порядок стрелками. Данные о местоположении автоматически удаляются из каждого фото.
Отметьте Опубликовать этот дом и нажмите Сохранить объявление.

Когда жильё сдано, нажмите Снять с публикации на странице «Объявления». Оно исчезнет с вашего сайта в течение пяти минут, менять код не нужно.

У каждого объявления есть собственная страница с фотогалереей и кнопкой Подать заявку на этот дом. Форма заявки открывается с уже выбранным домом, а заявки появляются на вкладке Заявки на аренду.

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

Вариант A: код виджета (рекомендуется)

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

<div data-rentmerchant-listings="your-name"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

Вариант B: iframe

Для конструкторов, не разрешающих скрипты. Это блок фиксированной высоты с прокруткой:

<iframe src="https://app.rentmerchant.com/embed/listings/your-name" title="Available rentals"
        loading="lazy" style="width:100%;height:900px;border:0"></iframe>

Если ваш конструктор разрешает рядом скрипт, используйте вместо этого версию с автоматическим размером со страницы «Интеграции». Она добавляет одну строку, благодаря которой блок становится ровно такой высоты, как ваши объявления.

5. Плавающая кнопка для жильцов

Добавляет кнопку Жильцы в нижний угол каждой страницы. Она открывает небольшое меню: «Вход для жильцов», «Оплатить аренду», «Подать заявку на ремонт», «Подать заявку» и «Свободные объекты» (каждый пункт показывается, только если он применим к вашему аккаунту). Вставьте код один раз в той области конструктора, которая добавляет код на все страницы (обычно это код для всего сайта, код футера или внедрение кода):

<script src="https://app.rentmerchant.com/embed/v1/resident-button.js" data-rentmerchant-site="your-name" async></script>

Если в вашем конструкторе нет области кода для всего сайта, вставьте код на каждую страницу, где нужна кнопка.

6. Кнопки и ссылки

Кнопки: в разделе «Кнопки» на странице «Интеграции» отметьте нужные кнопки, выберите цвет, проверьте предпросмотр и скопируйте код. Кнопки представляют собой обычные оформленные ссылки, поэтому работают в любом конструкторе, который принимает HTML, включая email-рассылки.

Ссылки (любой тариф): скопируйте любую ссылку в меню навигации сайта, футер, профиль в соцсетях или подпись в письмах. В большинстве конструкторов: откройте редактор меню, добавьте пункт ссылка и вставьте адрес.

7. QR-коды

В разделе QR-кодов нажмите Скачать PNG под нужным кодом. Распечатайте его на табличке «Сдаётся» (используйте «Свободные объекты» или «Подать заявку»), на объявлении в прачечной («Оплатить аренду» или «Ремонт») или в пакете документов при заселении. Печатайте шириной не менее 2,5 см (1 дюйм) и проверьте сканирование своим телефоном, прежде чем печатать много копий.

8. Пошаговые инструкции для вашего конструктора сайтов

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

Wix

Объявления или кнопки: в редакторе нажмите Add Elements (+), затем Embed Code, затем Embed HTML. Выберите Код, вставьте код и нажмите Обновить. Растяните блок до нужного размера.
Кнопка для жильцов: откройте Настройки сайта, затем Custom Code (в разделе «Дополнительно»), нажмите Add Custom Code, вставьте код, выберите Все страницы и Body, конец. Wix разрешает Custom Code только на сайтах с подключённым доменом и платным тарифом.
Опубликуйте свой сайт.

Squarespace

Объявления или кнопки: откройте страницу для редактирования, нажмите на место вставки, выберите Код, вставьте код и убедитесь, что Display Source выключен.
Кнопка для жильцов: откройте Настройки, затем Developer Tools (или Дополнительно), затем Code Injection и вставьте код в Футер.
Скрипты в блоках Code и Code Injection требуют тарифа Squarespace с поддержкой пользовательского кода. Если код виджета не работает, используйте вариант с iframe.

WordPress

Объявления или кнопки: откройте страницу для редактирования, нажмите +, добавьте блок Custom HTML, вставьте код и обновите страницу.
Кнопка для жильцов: используйте настройку кода футера в вашей теме, если она есть, или плагин для кода в шапке и футере (например, WPCode), и вставьте код в футер.
На WordPress.com (размещённый сервис) скрипты работают только на тарифах, разрешающих плагины и собственный код. На других тарифах используйте вариант с iframe и кнопки.

GoDaddy Websites + Marketing

Откройте редактор сайта, нажмите Add Section, найдите HTML и добавьте его.
Вставьте код в поле пользовательского кода раздела и нажмите Готово. Здесь надёжнее всего вариант с iframe.
Для кнопки для жильцов найдите код для всего сайта в разделе Настройки вашего сайта. Если на вашем тарифе этого нет, добавьте кнопки на страницы.

Weebly (Square Online classic)

Объявления или кнопки: перетащите элемент Embed Code на страницу, нажмите на него, выберите Edit Custom HTML и вставьте код.
Кнопка для жильцов: Настройки, затем SEO, затем вставьте код в Footer Code.

Webflow

Объявления или кнопки: перетащите элемент Code Embed на страницу и вставьте код.
Кнопка для жильцов: Настройки сайта, затем Собственный код, и вставьте код в Код футера. Опубликуйте.
Для пользовательского кода в Webflow нужен платный тариф сайта.

Индивидуальный или самописный сайт

Вставьте код виджета там, где должны быть объявления, а кнопку для жильцов прямо перед закрывающим тегом </body>. Или используйте JSON-фиды, чтобы создать собственный дизайн.

9. Справочник параметров

Атрибут	Работает с	Что это делает
data-limit="3"	Виджет объявлений	Показывать только первые несколько объявлений (сначала с ближайшей датой).
data-accent="#0f766e"	Виджет объявлений, кнопка для жильцов	Ваш цвет в виде шестизначного шестнадцатеричного кода. По умолчанию используется индиго RentMerchant.
data-position="left"	Кнопка для жильцов	Разместить кнопку в левом нижнем углу вместо правого.
data-label="Tenants"	Кнопка для жильцов	Измените текст кнопки (до 24 символов).
?accent=0f766e	Адрес iframe	Ваш цвет для версии с iframe, добавляется в конец её адреса.

Пример: виджет с тремя домами в бирюзовом цвете:

<div data-rentmerchant-listings="your-name" data-limit="3" data-accent="#0f766e"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

10. Веб-разработчикам: JSON-фиды

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

GET https://app.rentmerchant.com/r/your-name/listings.json
GET https://app.rentmerchant.com/r/your-name/links.json

Каждый элемент в listings включает:

{
  "id": 476,
  "title": "Capitol Flats · Unit 102",
  "city": "Columbus, OH",
  "rent": "$1,950/mo",          "rent_amount": 1950,
  "deposit": "$1,950",
  "facts": ["2 bed", "1 bath", "880 sq ft"],
  "bedrooms": 2, "bathrooms": 1, "square_feet": 880,
  "available": "Available now", "available_on": null,
  "pets": "Cats OK",
  "description": "Bright corner two bedroom...",
  "photos": [{ "url": "...", "thumb": "...", "w": 2000, "h": 1500 }],
  "url": "https://app.rentmerchant.com/r/your-name/listings/476",
  "apply_url": "https://app.rentmerchant.com/apply/...?unit=476"
}

Выводите текст точно в том виде, в каком он передан, и ставьте ссылки на url и apply_url, а не создавайте собственную форму заявки. Полный адрес указан только на странице объявления, а не в фиде. links.json возвращает ваше имя, акцентный цвет и ссылки для жильцов (key, label, url).

11. Устранение неполадок

Область виджета пуста.: Возможно, ваш конструктор удаляет скрипты; используйте вариант с iframe. Также проверьте, что у вашего аккаунта тариф Pro, адрес электронной почты подтверждён, а код вставлен полностью.
Пишет, что свободных домов нет.: Откройте «Объявления» в своём аккаунте и убедитесь, что хотя бы одно жильё отмечено как опубликованное. Изменения появятся в течение пяти минут.
В редакторе всё выглядит нормально, а на опубликованном сайте нет.: Большинство конструкторов запускают скрипты только на опубликованном сайте, а не в предпросмотре редактора. Опубликуйте сайт, затем проверьте его по живому адресу.
iframe обрезан или в нём появляется полоса прокрутки.: Используйте версию с автоматическим размером или увеличьте значение height в коде iframe.
Кнопка для жильцов не отображается.: Код должен быть в области кода для всего сайта или на самой странице, и он отображается только на опубликованном сайте. Если у вашего аккаунта нет ссылок для показа, кнопка остаётся скрытой.
Что-то ещё?: Откройте Поддержка в своём аккаунте и сообщите адрес вашего сайта и конструктор, на котором он сделан. Мы посмотрим.

12. Безопасность и конфиденциальность

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

Готовы подключить свой сайт?

Войдите и откройте «Интеграции» или сначала посмотрите, как работает виджет объявлений.

Открыть «Интеграции» Открыть живое демо

Интеграции с сайтом