Environmental Intelligence

How to add CLARA to your website

Add these two lines where the report should appear:

<div id="clara-widget"
     data-clara-partner="your_partner_name"
     data-clara-address="Rue des Drapiers 2, 1050 Ixelles"></div>
<script src="https://widget.clara.city/embed.js" async></script>

data-clara-partner is the name your sales are recorded under.

data-clara-address is the address for which the report is generated.

Additional options

Drop any line you do not need.

<div id="clara-widget"
     data-clara-partner="your_partner_name"
     data-clara-address="Rue des Drapiers 2, 1050 Ixelles"
     data-clara-listing="your_listing_id"
     data-clara-lat="50.83638"
     data-clara-lon="4.35833"
     data-clara-lang="fr"
     data-clara-variant="b"></div>
<script src="https://widget.clara.city/embed.js" async></script>

data-clara-listing (optional). Your own reference for this record, stored with the sale so you can match it back to your system.
data-clara-lat and data-clara-lon (optional). Send both or neither. Useful where the address alone could point to the wrong place.
data-clara-lang (optional). The language of the widget, the payment page, the e-mail and the report: fr, nl or en (default).
data-clara-variant (optional). Which layout to show, a or b (default). Both are below.

Widget auto-hiding

Before it appears, the widget checks that CLARA can serve the address. If it cannot, nothing is shown and your page keeps no empty space. Your element receives one of two events, so a block of yours around it can follow:

el.addEventListener("clara:ready", function (e) { /* the widget is on screen */ });
el.addEventListener("clara:unavailable", function (e) {
  // e.detail.reason: "outside_area", "not_found", "timeout" or "error"
});

outside_area: the address is outside the area CLARA covers for you.
not_found: the address could not be located.
timeout or error: CLARA did not answer within 10 seconds, or failed. The widget never keeps your page waiting longer.

The tidiest way: keep your block hidden and show it on clara:ready, so nothing ever appears on a listing CLARA cannot serve.

The check runs when the widget comes near the screen and its answer is kept per address, so it costs your page one small request.

If your site sets a Content Security Policy, allow https://widget.clara.city in script-src, frame-src and connect-src.

About reports

Reports are produced by the CLARA API and delivered as HTML and PDF. More at clara.city.

The two layouts

Live, and yours to click. Only paying is disabled.

a — the full card.

Demo

b — the compact row. This is the default.

Demo