Показывайте актуальную оценку удобства жизни для любого адреса прямо на своих страницах — бесплатно, адаптивно и без сборки проекта. Отлично подходит для объявлений о недвижимости, путеводителей по районам, инструментов для переезда и городских страниц. Посетители, нажавшие на оценку, попадут на полный отчёт BuildingsScore.
Добавьте заполнитель туда, где должна появиться оценка, и подключите скрипт один раз на странице. Укажите координаты места, которое нужно оценить:
<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 (широкий баннер — оценка рядом с компактной двухколоночной сеткой характеристик). |
data-theme | auto (по умолчанию, следует системной теме посетителя), light или dark. |
data-ref | Метка вашего сайта или кампании для атрибуции. По умолчанию — ваш домен. |
data-height | Начальная высота в пикселях до автоматического измерения карточки (по умолчанию 440). |
data-cta | Установите 0, чтобы скрыть кнопку «Смотреть полный отчёт». |
Рендерите объявления динамически (бесконечная прокрутка, SPA, результаты AJAX)? После вставки новых заполнителей вызовите:
BuildingsScore.render();
Обойдитесь без скрипта и встройте виджет напрямую:
<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 для этого места в новой вкладке — так ваша страница удерживает посетителя, пока он изучает подробности. Мы никогда не устанавливаем сторонние куки в виджете, а оценка вычисляется на наших серверах, поэтому ваша страница остаётся быстрой.