Widgets zur Integration des Beteiligungsportals in andere Webauftritte

Zur Integration der Widgets in eine Seite muss

1. die Javascript API geladen werden
2. ein Element als Anker für die Integration bereitgestellt werden; das Element wird durch das Class-Attribut nbp-widget als Anker markiert.
3. die Konfiguration des Widgets innerhalb des Ankerelements per data- Attribut vorgenommen werden

Integration der aktuellen Veranstaltungen eines Mandanten

<!-- Beteiligungsportal Javascript API laden -->
<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>
<!-- Beteiligungsportal Widget - innerhalb dieses Elements wird das Widget gerendert -->
<div class="nbp-widget" data-widget-typ="veranstaltung-list" data-mandant="hauptportal" data-zeitraum-von="-1M" data-zeitraum-bis="1M"/>
        

Beispiel: Liste der Veranstaltungen im Hauptportal, Zeitraum über Start- und Ende-Datum eingeschränkt

<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>

<div class="nbp-widget"
     data-widget-typ="veranstaltung-list"
     data-mandant="hauptportal"
     data-zeitraum-von="2020-01-01"
     data-zeitraum-bis="2025-12-31"/>
       

Beispiel: Liste der Veranstaltungen im Hauptportal, Zeitraum über relative Monatsangaben eingeschränkt

<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>

<div class="nbp-widget"
     data-widget-typ="veranstaltung-list"
     data-mandant="hauptportal"
     data-zeitraum-von="-1M"
     data-zeitraum-bis="12M"/>
       

Beispiel: Liste der Veranstaltungen im Hauptportal, durch Filterung nach Beteiligungsthemen eingeschränkt

<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>

<div class="nbp-widget"
     data-widget-typ="veranstaltung-list"
     data-mandant="hauptportal"
     data-beteiligung-thema="'Bauen und Wohnen'"
     data-zeitraum-von="2020-01-01"
     data-zeitraum-bis="2025-12-31"/>
       

Konfiguration

Definition des Widget-Typs:

data-widget-typ="veranstaltung-list"

Definition des Mandanten:

data-mandant="hauptportal"

Der Mandant kann aus der URL der Liste der aktuellen Beteiligungen ausgelesen werden (fett markiert):

https://beteiligung.nrw.de/portal/hauptportal/beteiligung/themen

Definition des Zeitraums:

Absolute Datumsangaben (erstes Beispiel)

data-zeitraum-von="2020-01-01"
data-zeitraum-bis="2025-12-31"

Relative Datumsangaben (zweites Beispiel)

data-zeitraum-von="-1M"
data-zeitraum-bis="12M"

Gültige Formate sind:

• absolute Datumsangaben: Werte nach dem Muster "JJJJ-MM-TT" (ISO 8601: vierstelliges Jahr, zweistelliger Monat, zweistelliger Tag des Monats)
• relative Datumsangaben: positive oder negative Ganzzahl, gefolgt von einem "M" (Anzahl der Monate, relativ zum aktuellen Datum, "0M" für den aktuellen Monat)

Hinweise zu Datums-Parametern:

• Es müssen immer beide Zeitraum-Parameter angegeben werden, die Formate können gemischt verwendet werden.
• Für relative Werte werden jeweils komplette Monate angenommen, ein 'von'-Wert entspricht immer dem ersten, ein 'bis'-Wert immer dem letzten Tag des betreffenden Monats.
• Kann ein übermittelter Zeitraum-Parameter weder als absoluter noch als relativer Wert verarbeitet werden, rendert das Widget keinen Inhalt.

Filtern nach Beteiligungsthemen (optionaler Parameter):

data-beteiligung-thema="'Bauen und Wohnen'"

Gültige Beteiligungsthemen sind:

• 'Arbeit'
• 'Bauen und Wohnen'
• 'Bildung'
• 'Digitales'
• 'Freizeit und Tourismus'
• 'Gesundheit und Pflege'
• 'Haushalt und Finanzen'
• 'Integration und Inklusion'
• 'Justiz, Inneres und öffentliche Sicherheit'
• 'Kinder, Jugend, Familie, Senioren und Soziales'
• 'Kunst und Kultur'
• 'Landwirtschaft, Forsten und Verbraucherschutz'
• 'Mängelmelder'
• 'Räumliche Entwicklung'
• 'Umwelt, Klima und Nachhaltigkeit'
• 'Verkehr und Mobilität'
• 'Wissenschaft und Technologie'
• 'Wirtschaft und Industrie'
• 'Zukunft und Veränderung'

Die Beteiligungsthemen sind in einfachen Anführungszeichen (') anzugeben.

Soll nach mehreren Beteiligungsthemen gefiltert werden, sind diese durch Leerzeichen zu trennen.

Begrenzung der Ergebnisliste (optionaler Parameter):

data-liste-max="5"

Erwartet wird eine positive Ganzzahl. Ist der übergebene Wert ungültig, wird er ignoriert und die komplette Liste ausgeliefert (Standardverhalten).