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-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`	Default view: list (default) or tile.
`data-cleanups-columns`	Fixed number of columns in tile view: 1, 2 or 3.
`data-cleanups-map`	Show a map above the list: true.
`data-cleanups-share-base`	Point share links to your site instead of cleanups.berlin.

For developers: the accent colour and backgrounds can be set via CSS custom properties (--cb-brand, --cb-surface-card) on the script element. 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.