BuildingsScore beágyazása a webhelyedre

Jeleníts meg élő élhetőségi pontszámot bármely címhez saját oldalaidon — ingyen, reszponzívan és build lépés nélkül. Tökéletes ingatlanlistákhoz, városnegyedi útmutatókhoz, költözési eszközökhöz és városi oldalakhoz. Azok a látogatók, akik megérintik a pontszámot, a teljes BuildingsScore riporthoz jutnak.

Két sor HTML

Adj hozzá egy helyőrzőt oda, ahol a pontszámot szeretnéd megjeleníteni, majd töltsd be a szkriptet oldalanként egyszer. Állítsd be az értékelni kívánt hely koordinátáit:

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

Ennyi az egész. A szkript lecseréli a helyőrzőt egy pontszámkártyára, és automatikusan méretezi azt.

Élő előnézet

Ez pontosan az a widget, amelyet a fenti kódrészlet létrehoz:

Elrendezések

Két forma a data-layout segítségével — vertical (a fent látható alapértelmezett, oldalsávokhoz és kártyákhoz ideális) és horizontal, egy széles banner, amely egy lista tetejére vagy egy teljes szélességű sorba illeszkedik:

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

Beállítások

A widgetet a helyőrzőn lévő data-* attribútumokkal konfigurálhatod:

AttribútumLeírás
data-lat / data-lngAz értékelni kívánt hely koordinátái. A megbízható, keresés nélküli lehetőség — használd ezeket, ha rendelkezésre állnak.
data-addressEgy értékelendő utcacím (geokódolva, ha nem adsz meg lat/lng értéket) és/vagy a kártyán megjelenített felirat.
data-layoutvertical (alapértelmezett, magas kártya) vagy horizontal (széles banner — pontszám egy kompakt kétoszlopos dimenzióráccsal).
data-themeauto (alapértelmezett, a látogató operációs rendszerét követi), light vagy dark.
data-refAz attribúcióhoz használt webhely-/kampánycímkéd. Alapértelmezés szerint a domained.
data-heightKezdeti magasság px-ben, mielőtt a kártya önmagát méri (alapértelmezett: 440).
data-ctaÁllítsd 0-ra a "Teljes riport megtekintése" gomb elrejtéséhez.

Widgetek hozzáadása az oldal betöltése után

Dinamikusan rendereled a listákat (végtelen görgetés, SPA, AJAX eredmények)? Miután új helyőrzőket szúrtál be, hívd meg a következőt:

BuildingsScore.render();

Inkább egy egyszerű iframe?

Hagyd el a szkriptet, és ágyazd be a widgetet közvetlenül:

<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>

A szkripttel a kártya automatikusan a tartalmához igazítja méretét; egyszerű iframe esetén te magad állítasz be fix magasságot.

Hogyan működnek a kattintások

A pontszám, a gomb és minden kategória megnyitja az adott hely teljes, interaktív BuildingsScore riportját egy új lapon — így az oldalad megtartja a látogatót, miközben ő részletes áttekintést kap. A widgetben soha nem állítunk be harmadik féltől származó sütiket, a pontszámot pedig a szervereink számítják ki, így az oldalad gyors marad.