Het renovatieadvies op elke advertentie — met één regel code
Voor de webbouwer van het immokantoor. Reken op tien minuten, één keer. Daarna hoeft er aan de website niets meer te gebeuren: het kantoor voegt zelf panden toe op zijn kantoorpagina.
1 Plak deze regel in het advertentiesjabloon
Zet ze in het sjabloon (template) van de detailpagina van een pand, op de plaats waar het advies moet verschijnen. Een goede plek is net onder de EPC-vermelding of onder de beschrijving.
<script src="https://beterepc.be/js/beterepc-widget.js" data-kantoor="KANTOOR_ID" async></script>Vervang KANTOOR_ID door het id van het kantoor. Dat staat ingevuld op de kantoorpagina (blok "Op uw website zetten").
Laat uw site scripts alleen in de <head> of onderaan toe (Webflow, een WordPress-plugin voor headerscripts, Google Tag Manager, Next.js of Nuxt)? Zet de regel dan waar het mag, en zet op de plaats waar het advies moet komen dit lege blok in het sjabloon:
<div data-beterepc></div>De widget verschijnt dan in dat blok. Zonder dat blok toont een regel in de <head> niets.
2 Wat de regel doet
- De widget kijkt naar de URL van de pagina en vraagt aan BeterEPC of daar een pand bij hoort.
- Ja → het renovatieadvies verschijnt op die plaats: het huidige label, wat haalbaar is, de werken met kosten en een knop naar het volledige advies.
- Nee → de widget toont niets. De regel mag dus gerust in het sjabloon van álle advertenties staan.
- Wisselt uw site van advertentie zonder de pagina te herladen (Next.js, Nuxt, React…)? De widget merkt dat en zoekt opnieuw, zodat nooit het advies van het vorige pand blijft staan.
- De widget draait in een afgeschermd blok (shadow DOM): de CSS van de site en die van de widget beïnvloeden elkaar niet.
- Hij neemt vanzelf de accentkleur, het lettertype en de afronding van de site over.
3 Testen
Open een advertentie waarvoor het kantoor al een EPC instuurde op zijn kantoorpagina (status "live"). Het advies hoort binnen een seconde te verschijnen. Op andere advertenties blijft de plek leeg.
Belangrijk: het kantoor registreert de publieke link van de advertentie, zoals een bezoeker ze ziet. Varianten met www., een slash op het einde of trackingparameters (utm_…, fbclid) worden herkend, en extra parameters zoals ?lang=nl ook. Heeft de pagina een <link rel="canonical">, dan gebruikt de widget die als tweede aanwijzing.
Verschijnt er niets bij een pand dat live staat? Open de console van de browser (F12). Staat daar een melding over Content Security Policy, dan laat de site alleen scripts van vaste domeinen toe. Voeg dan https://beterepc.be toe aan script-src en aan connect-src in de CSP-header van de site. Meer is er niet nodig.
4 Optioneel: de stijl bijsturen
| Attribuut | Wat het doet | Voorbeeld |
|---|---|---|
data-accent | Accentkleur (knop, lijnen, vinkjes) | data-accent="#1d4ed8" |
data-font | Lettertype | data-font="Poppins, sans-serif" |
data-radius | Afronding in pixels (0–18) | data-radius="4" |
data-formaat | Alleen een samenvatting, zonder werkenlijst (de gewone versie past zich zelf aan een smalle kolom aan) | data-formaat="smal" |
data-thema | De eigen groen-gele stijl van BeterEPC behouden | data-thema="beterepc" |
5 Geen toegang tot het sjabloon?
Dan kan het kantoor per pand de rapportlink kopiëren op zijn kantoorpagina en die in de omschrijving, een nieuwsbrief of een mail aan geïnteresseerden zetten. De koper krijgt dan hetzelfde advies, zonder widget.
Vragen of een probleem? Mail siemen@beterepc.be. BeterEPC is een product van Energie Ingenieur BV; zaakvoerder Siemen Reynders is erkend energiedeskundige type A.
Kantoor-login · BeterEPC voor makelaars