将 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，且评分在我们的服务器上计算，因此您的页面依然保持快速加载。