설정 가이드
기존 웹사이트에 RentMerchant 리스팅, 임대료 결제 버튼, 입주자 메뉴, QR 코드를 넣는 방법. 대부분의 집주인은 약 10분 만에 마칩니다.
이 페이지의 예시에서 your-name은(는) 회원님 계정 이름을 나타냅니다. 이 예시를 다시 입력하지 말고 항상 통합 페이지에서 실제 코드를 복사하세요.
위젯에는 귀하가 게시한 집이 표시됩니다. 집을 하나씩 켜기 전까지는 아무것도 게시되지 않습니다.
집이 임대되면 매물 목록 페이지에서 게시 취소을(를) 클릭하세요. 코드를 변경하지 않아도 5분 이내에 웹사이트에서 사라집니다.
게시된 집을 사진, 임대료, 침실, 욕실, 입주 가능일이 담긴 카드로 보여 줍니다. 방문자가 카드를 클릭하면 해당 매물 페이지가 열립니다.
페이지 너비에 맞춰지고 리스팅에 맞게 늘어납니다. 리스팅이 표시될 위치에 붙여 넣으세요:
<div data-rentmerchant-listings="your-name"></div> <script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>
스크립트를 허용하지 않는 빌더용. 스크롤되는 고정 높이 상자입니다:
<iframe src="https://app.rentmerchant.com/embed/listings/your-name" title="Available rentals"
loading="lazy" style="width:100%;height:900px;border:0"></iframe>
빌더에서 옆에 스크립트를 넣을 수 있다면 대신 통합 페이지의 자동 크기 조정 버전을(를) 사용하세요. 한 줄이 추가되어 상자 높이가 리스팅에 정확히 맞춰집니다.
사이트의 모든 페이지 하단 모서리에 거주자 버튼을 추가합니다. 버튼을 누르면 작은 메뉴가 열립니다: 입주자 로그인, 임대료 결제, 수리 요청 제출, 지금 신청하기, 임대 가능 매물(각 항목은 회원님의 계정에 해당하는 경우에만 표시). 빌더에서 모든 페이지에 코드를 추가하는 영역(보통 사이트 전체 코드, 푸터 코드 또는 코드 삽입이라고 함)에 한 번만 붙여 넣으세요:
<script src="https://app.rentmerchant.com/embed/v1/resident-button.js" data-rentmerchant-site="your-name" async></script>
빌더에 사이트 전체 코드 영역이 없다면 버튼을 표시할 각 페이지에 붙여 넣으세요.
버튼: 통합의 버튼 섹션에서 원하는 버튼을 선택하고 색상을 고른 다음 미리보기를 확인하고 코드를 복사하세요. 버튼은 스타일이 적용된 일반 링크이므로 이메일 뉴스레터를 포함해 HTML을 지원하는 모든 빌더에서 작동합니다.
링크 (모든 플랜): 링크를 복사하여 사이트의 탐색 메뉴, 푸터, 소셜 미디어 프로필 또는 이메일 서명에 붙여 넣으세요. 대부분의 빌더에서는 메뉴 편집기를 열고 링크 항목을 추가한 다음 주소를 붙여 넣으면 됩니다.
QR 코드 섹션에서 원하는 코드 아래의 PNG 다운로드을(를) 클릭하세요. "임대" 안내판(임대 가능 매물 또는 지금 신청하기 사용), 세탁실 공지(임대료 결제 또는 수리), 입주 안내 자료에 인쇄하세요. 최소 2.5cm(1인치) 너비로 인쇄하고, 여러 장 인쇄하기 전에 본인 휴대폰으로 스캔해 보세요.
빌더는 수시로 메뉴를 변경합니다. 아래 라벨이 정확히 일치하지 않으면 HTML, Embed 또는 Code라는 요소를 찾으세요.
매물이 들어갈 위치에 위젯 코드를 붙여 넣고, 거주자 버튼은 닫는 </body> 태그 바로 앞에 붙여 넣으세요. 또는 JSON 피드를 사용해 직접 디자인할 수도 있습니다.
| 속성 | 지원 환경 | 기능 |
|---|---|---|
| data-limit="3" | 리스팅 위젯 | 처음 몇 개의 집만 표시합니다(입주 가능일이 빠른 순). |
| data-accent="#0f766e" | 리스팅 위젯, 입주자 버튼 | 여섯 자리 hex 코드로 지정하는 원하는 색상입니다. 기본값은 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>
두 개의 공개 읽기 전용 피드가 위젯과 같은 데이터를 제공합니다. 키가 필요 없고, 교차 출처 요청이 허용되며, 응답은 5분간 캐시됩니다.
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)를 반환합니다.
height 값을 늘리세요.