BuildingsScore를 사이트에 임베드하기

내 페이지에서 모든 주소의 실시간 거주적합성 점수를 보여주세요 — 무료, 반응형이며 빌드 단계가 필요 없습니다. 부동산 매물, 동네 가이드, 이주 도구, 도시 페이지에 안성맞춤입니다. 점수를 탭한 방문자는 BuildingsScore 전체 리포트로 이동합니다.

HTML 두 줄

점수를 표시할 위치에 플레이스홀더를 추가하고, 스크립트를 페이지당 한 번만 로드하세요. 점수를 매길 장소의 좌표를 설정합니다:

<div data-buildingsscore data-lat="48.8584" data-lng="2.2945"></div>
<script async src="https://buildingsscore.com/embed.js"></script>

이게 전부입니다. 스크립트가 플레이스홀더를 점수 카드로 교체하고 크기를 자동으로 맞춥니다.

라이브 미리보기

위 스니펫이 만들어내는 위젯이 바로 이것입니다:

레이아웃

data-layout으로 두 가지 형태를 선택할 수 있습니다 — vertical (위에 표시된 기본값, 사이드바와 카드에 적합)과 horizontal, 매물 상단이나 전체 너비 행에 맞는 넓은 배너:

<div data-buildingsscore data-layout="horizontal"
     data-lat="48.8584" data-lng="2.2945"></div>

옵션

플레이스홀더의 data-* 속성으로 위젯을 설정하세요:

속성	설명
`data-lat` / `data-lng`	점수를 매길 장소의 좌표. 별도 검색 없이 쓸 수 있는 가장 확실한 방법 — 좌표가 있으면 사용하세요.
`data-address`	점수를 매길 도로 주소(lat/lng를 전달하지 않으면 지오코딩됨) 또는 카드에 표시할 레이블.
`data-layout`	`vertical` (기본값, 세로형 카드) 또는 `horizontal` (넓은 배너 — 점수가 간결한 2열 그리드 옆에 표시됨).
`data-theme`	`auto` (기본값, 방문자 OS 설정 따름), `light`, 또는 `dark`.
`data-ref`	어트리뷰션용 사이트/캠페인 태그. 기본값은 도메인.
`data-height`	카드가 스스로 크기를 측정하기 전의 초기 높이(px) (기본값 `440`).
`data-cta`	`0`으로 설정하면 "전체 리포트 보기" 버튼을 숨깁니다.

페이지 로드 후 위젯 추가하기

동적으로 매물을 렌더링하나요(무한 스크롤, SPA, AJAX 결과)? 새 플레이스홀더를 삽입한 뒤 다음을 호출하세요:

BuildingsScore.render();

일반 iframe을 선호하시나요?

스크립트 없이 위젯을 직접 임베드하세요:

<iframe
  src="https://buildingsscore.com/embed.html?lat=48.8584&lng=2.2945"
  style="width:100%;height:440px;border:0"
  loading="lazy" title="BuildingsScore"></iframe>

스크립트를 사용하면 카드가 콘텐츠에 맞게 자동으로 크기를 조정합니다; 순수 iframe의 경우 높이를 직접 고정값으로 지정해야 합니다.

클릭 동작 방식

점수, 버튼, 그리고 각 카테고리를 클릭하면 해당 장소의 전체 인터랙티브 BuildingsScore 리포트가 새 탭에서 열립니다 — 방문자가 상세 내용을 확인하는 동안에도 내 페이지를 떠나지 않습니다. 위젯에서 서드파티 쿠키를 일절 설정하지 않으며, 점수는 저희 서버에서 계산되므로 페이지 속도가 유지됩니다.