Aktionen einbinden
Die Müllsammel-Aktionen der Berliner Initiativen sind offene Daten. Du kannst sie auf deiner eigenen Website anzeigen oder in deinen Kalender holen. Das funktioniert für Initiativen genauso wie für Bezirks- und Stadtteilseiten. Alles ohne Account.
1. Einbett-Widget
Ein kurzer Code-Schnipsel, kein Programmieren nötig. Das Widget aktualisiert sich von selbst.
Manche Website-Baukästen lassen fremden Einbett-Code nur in einem kostenpflichtigen Tarif oder gar nicht zu. Dann hilft der Kalender-Feed weiter.
Eine Initiative
Ersetze deine-initiative durch den Namen der Initiative aus ihrer cleanups.berlin-Adresse. Steht die Initiative z. B. unter /i/arkona-trifft-sich, ist es arkona-trifft-sich.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-org="deine-initiative"></script>Berlinweit
Alle aktiven Initiativen mit einem Bezirksfilter zum Eingrenzen.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-berlin></script>Ein Bezirk
Fest auf einen Bezirk oder Ortsteil eingegrenzt, ohne Filter. Welcher Name in den Code gehört, steht in der Adresse der Bezirksseite: bei /r/pankow ist es pankow.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-region="pankow"></script>Einstellungen
Über zusätzliche Attribute steuerst du Umfang und Darstellung. Beispiel mit allen gängigen Optionen:
<script src="https://cleanups.berlin/embed.js"
data-cleanups-berlin
data-cleanups-upcoming="4w"
data-cleanups-view="tile"
data-cleanups-columns="2"
data-cleanups-map="true"></script>| Attribut | Wirkung |
|---|---|
data-cleanups-org | Eine Initiative anzeigen. Als Wert den Namen aus ihrer cleanups.berlin-Adresse. |
data-cleanups-berlin | Alle Aktionen berlinweit, mit Bezirksfilter. Kein Wert nötig. |
data-cleanups-region | Fest auf einen Bezirk oder Ortsteil, ohne Filter. Als Wert den Namen aus der Bezirksadresse. |
data-cleanups-upcoming | Kommende Aktionen begrenzen: Anzahl (z. B. 10) oder Zeitfenster (4w, 2m). |
data-cleanups-past | Vergangene Aktionen zusätzlich zeigen, gleiche Schreibweise wie upcoming. |
data-cleanups-view | Standardansicht: list (Standard) oder tile. |
data-cleanups-columns | Feste Spaltenzahl in der Kachelansicht: 1, 2 oder 3. |
data-cleanups-map | Karte oberhalb der Liste anzeigen: true. |
data-cleanups-share-base | Teilen-Links auf eure Seite statt auf cleanups.berlin lenken. |
Die Akzentfarbe und Hintergründe lassen sich über CSS Custom Properties (--cb-brand, --cb-surface-card) auf dem Script-Element setzen. Die Farbe, mit der eine Initiative ihre Aktionen kennzeichnet, legt die Initiative selbst fest; beim Einbinden lässt sie sich nicht ändern.
Ohne JavaScript (iframe)
Für Plattformen, die keinen eigenen Script-Einbau erlauben, aber HTML zulassen.
<iframe src="https://cleanups.berlin/embed/deine-initiative"
width="100%" height="400" frameborder="0"></iframe>Du betreust selbst eine Initiative? Nach dem Login findest du unter Verwalten einen Konfigurator mit Live-Vorschau, der dir den passenden Code erzeugt.
2. Kalender-Feed (ICS)
Abonniere die Termine in jedem Kalenderprogramm oder ziehe sie in deine eigene Anwendung. Der Feed bleibt automatisch aktuell.
Eine Initiative
https://cleanups.berlin/api/orgs/deine-initiative/feed.ics
Ein Bezirk
Alle Aktionen eines Bezirks gebündelt, über alle Initiativen hinweg.
https://cleanups.berlin/api/regions/pankow/feed.ics
In Kalender-Apps als abonniertes Kalender-Abo eintragen (nicht importieren), damit neue Termine nachgeladen werden.
3. Programmierschnittstelle (API)
Wenn du die Daten direkt in eine eigene Anwendung holen möchtest.
Eine dokumentierte öffentliche API ist in Vorbereitung. Bis dahin decken Einbett-Widget und Kalender-Feed die meisten Fälle ab.