Embed actions

The cleanup actions of Berlin's initiatives are open data. You can show them on your own website or pull them into your calendar. This works for initiatives just as well as for district and neighbourhood pages. All without an account.

1. For your website

The embed widget: a short code snippet, no programming needed. It updates itself.

Some website builders only allow third-party embed code on a paid plan, or not at all. In that case the calendar feed helps.

A single initiative

Replace deine-initiative with the initiative's name from its cleanups.berlin address. If the initiative is at /i/arkona-trifft-sich, for example, it is arkona-trifft-sich.

Code to embed on your site

<script src="https://cleanups.berlin/embed.js"
        data-cleanups-org="deine-initiative"></script>

City-wide

All active initiatives with a district filter to narrow things down.

Code to embed on your site

<script src="https://cleanups.berlin/embed.js"
        data-cleanups-berlin></script>

A single district

Fixed to one district or neighbourhood, without a filter. The name that goes into the code is in the district page's address: at /r/pankow it is pankow.

Code to embed on your site

<script src="https://cleanups.berlin/embed.js"
        data-cleanups-region="pankow"></script>

Settings

Additional attributes control the scope and appearance. Example with all common options:

Code to embed on your site

<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>

Attribute	Effect
`data-cleanups-org`	Show a single initiative. The value is the name from its cleanups.berlin address.
`data-cleanups-berlin`	All actions city-wide, with a district filter. No value needed.
`data-cleanups-region`	Fixed to one district or neighbourhood, without a filter. The value is the name from the district address.
`data-cleanups-initiatives`	Directory of all initiatives as tiles instead of an event list. No value needed.
`data-cleanups-upcoming`	Limit upcoming actions: a count (e.g. 10) or a time window (4w, 2m).
`data-cleanups-past`	Also show past actions, same notation as upcoming.
`data-cleanups-view`	Switch the view: list or tile. The default is list for a single initiative, and tile in Berlin-wide and region mode.
`data-cleanups-columns`	Fixed number of columns in tile and directory view: 1 to 6. Omit to fit the number of columns to the available width automatically.
`data-cleanups-map`	Show a map above the list: true.
`data-cleanups-filter-position`	District/subdistrict filter position relative to the map: above (default) or below.
`data-cleanups-share-base`	Point share links to your site instead of cleanups.berlin.
`data-cleanups-more-url`	Point the link at the foot of the embed to a page of your choice so visitors stay on your site. cleanups.berlin remains visible as an attribution.

For developers: the accent colour and backgrounds can be set via CSS custom properties (--cb-brand, --cb-surface-card) on an enclosing element; they have no effect on the script element itself, because the widget is mounted next to it. The colour an initiative uses to mark its actions is set by the initiative itself; it cannot be changed when embedding.

Without JavaScript (iframe)

For platforms that do not allow embedding your own script, but do allow HTML.

Code to embed on your site

<iframe src="https://cleanups.berlin/embed/deine-initiative"
        width="100%" height="400" frameborder="0"></iframe>

You run an initiative yourself? After logging in, under Manage you will find a configurator with a live preview that generates the right code for you.

2. For your calendar

The calendar subscription (ICS): subscribe to the events in any calendar program. It stays up to date automatically.

A single initiative

Calendar address

https://cleanups.berlin/api/orgs/deine-initiative/feed.ics

A single district

All actions of a district bundled together, across all initiatives.

Calendar address

https://cleanups.berlin/api/regions/pankow/feed.ics

Add it in your calendar app as a subscription. A one-time import will not load new events.

3. For your own applications

The public API: if you want to pull the data directly into your own application.

A documented public API is in preparation. Until then, the embed widget and calendar feed cover most cases.