將 BuildingsScore 嵌入您的網站

在您自己的頁面上為任何地址顯示即時宜居評分 — 免費、響應式，完全不需要任何建置步驟。非常適合房產列表、社區指南、搬遷工具和城市資訊頁面。訪客點擊評分後將前往完整的 BuildingsScore 報告。

兩行 HTML

在您希望顯示評分的位置新增一個佔位元素，然後每頁載入一次腳本。設定您希望評分地點的座標：

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

就這樣。腳本會將佔位元素替換為評分卡，並自動調整大小以適應內容。

即時預覽

以下就是上述程式碼所產生的 widget：

版面配置

透過 data-layout 提供兩種樣式 — vertical （預設，如上圖所示，適合側邊欄和卡片）和 horizontal，一個寬橫幅，適合放在列表頂部或全寬橫排中：

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

選項

透過佔位元素上的 data-* 屬性設定 widget：

屬性	說明
`data-lat` / `data-lng`	要評分地點的座標。最可靠的選項，不需要額外查詢 — 有的話請優先使用。
`data-address`	要評分的街道地址（若未提供 lat/lng 則進行地理編碼），以及/或顯示在卡片上的標籤。
`data-layout`	`vertical`（預設，高卡片）或 `horizontal`（寬橫幅 — 評分旁邊是緊湊的雙欄維度網格）。
`data-theme`	`auto`（預設，跟隨訪客的作業系統設定）、`light` 或 `dark`。
`data-ref`	您網站/行銷活動的標籤，用於歸因追蹤。預設為您的網域名稱。
`data-height`	卡片自動測量前的初始高度（像素），預設為 `440`。
`data-cta`	設為 `0` 可隱藏「查看完整報告」按鈕。

頁面載入後新增 widget

您在動態渲染列表（無限捲動、SPA、AJAX 結果）？插入新佔位元素後，呼叫：

BuildingsScore.render();

偏好使用一般 iframe？

跳過腳本，直接嵌入 widget：

<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 報告 — 這樣您的頁面在留住訪客的同時，讓他們獲得更深入的詳細資訊。我們絕不在 widget 中設置第三方 Cookie，且評分在我們的伺服器上運算，因此您的頁面仍能保持快速載入。