Widgets

Jouw gids in energiezuinig wonen

Ontdek het laatste nieuws en aankomende evenementen over energie besparen en verduurzaming in de provincie Utrecht. Kies uw gemeenschap om gepersonaliseerde informatie te zien over subsidies, advies en lokale acties.

Documentatie

Integreer eenvoudig het nieuws, agenda, initiatief en acties widget op uw website

Over deze widgets

De Energiepunt widgets bieden actuele informatie over energie besparen en verduurzaming in Utrecht. Alle widgets zijn responsive en passen zich aan aan de breedte van hun container.

Voor gemeenten: zo voegt u de widget toe

Er zijn twee manieren om de widget toe te voegen aan uw gemeentelijke website:

Optie 1: iFrame (makkelijkste)

Met een iFrame kunt u de widget eenvoudig insluiten zonder dat u code hoeft aan te passen. De widget wordt dan getoond in een apart venster binnen uw website.

Kies hierboven het gewenste widget type (Nieuws, Agenda, Initiatieven of Acties)
Selecteer uw gemeente en gewenste opties
Klik op de knop "Embed"
Kies voor "iFrame" als embed methode
Kopieer de code en plak deze op uw website

<iframe
  src="https://widgets.energiepunt.nl/widget.html?municipality=amersfoort"
  width="100%"
  height="600"
  style="border:none;max-width:900px;margin:0 auto;display:block"
  loading="lazy"
  title="Energiepunt.nl Nieuws">
</iframe>

Optie 2: JavaScript (voor webbouwers)

Met JavaScript krijgt u meer controle over de styling en integratie. Laat dit doen door uw webbouwer.

Kies hierboven het gewenste widget type
Selecteer uw gemeente en gewenste opties
Klik op de knop "Embed"
Kies voor "JavaScript" als embed methode
Kopieer de code en vraag uw webbouwer deze te plaatsen

<div id="epw-nieuws"></div>
<script src="https://widgets.energiepunt.nl/widget.js"></script>
<script>
EnergiepuntWidget.mount('#epw-nieuws', {
    municipality: 'amersfoort',
    limit: 5
});
</script>

Parameters

Met parameters kunt u de widget aanpassen:

Parameter	Beschrijving	Voorbeeld
`municipality`	Gemeente slug	`'amersfoort'`
`limit`	Aantal items (1-10)	`5`
`includeProvince`	Toon provinciaal nieuws	`true` of `false`
`showImages`	Toon afbeeldingen	`true` of `false`

Widget types

news - Nieuwsberichten
event - Agenda-evenementen
initiative - Lokale initiatieven
action - Lopende acties

Beschikbare gemeentes

Gebruik een van de volgende slugs:

amersfoort
baarn
bunnik
bunschoten
de-bilt
de-ronde-venen
houten
ijsselstein
leusden
montfoort
nieuwegein
oudewater
stichtse-vecht
utrechtse-heuvelrug
vijfheerenlanden
woerden
woudenberg

CSS styling aanpassen (voor webbouwers)

U kunt de widget volledig aanpassen aan uw eigen huisstijl. De widget gebruikt CSS variables die u kunt overschrijven:

Basis kleuren aanpassen

<style>
:root {
    --ep-yellow: #F6D64A;
    --ep-green: #46C94A;
    --ep-blue: #6EC9F5;
    --ep-purple: #8F2C8C;
    --ep-dark: #143A2A;
}
</style>

Afgeronde hoeken aanpassen

<style>
:root {
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-pill: 999px;
}
</style>

Specifieke elementen stijlen

<style>
/* Widget container */
.epw-widget {
    border-radius: 16px;
    font-family: 'Uw Font', sans-serif;
}

/* Titels */
.epw-item-title {
    font-size: 1.1rem;
    color: #333;
}
.epw-item-title a:hover {
    color: #143A2A;
}

/* Datum en locatie */
.epw-item-date {
    color: #666;
    font-size: 0.85rem;
}
.epw-item-location {
    color: #888;
    font-size: 0.85rem;
}

/* Labels (gemeente/provincie) */
.epw-item-pill-muni {
    background: #e8f5e9;
    color: #2e7d32;
}
.epw-item-pill-prov {
    background: #fff3e0;
    color: #e65100;
}

/* Link knoppen */
.epw-item-link {
    background: #f3e6f3;
    color: #8F2C8C;
}
.epw-item-link:hover {
    background: #e8d4e8;
}

/* Afbeeldingen */
.epw-item-image {
    border-radius: 8px;
}
</style>

Volledig eigen styling

U kunt alle stijlen overschrijven. Gebruik de developer tools van uw browser (F12) om de juiste CSS selectors te vinden.

CORS & toestemming

De widgets halen data live op via de Energiepunt API. Voor JavaScript widgets moet Energiepunt.nl CORS-toestemming verlenen voor uw domein. Neem contact op via energiepunt.nl/contact om toestemming aan te vragen.

Tip: Bij gebruik van een iFrame is geen CORS-toestemming nodig.

Hulp nodig?

Neem contact op met Energiepunt.nl via energiepunt.nl/contact voor vragen over de widget implementatie.