Water Dashboard, Cape Town

Put Cape Town's dam level on your website

A free widget for any website or blog. Pick what to show, copy one line of code, and it keeps itself up to date whenever the City publishes a new reading. Or take the data and build your own.

  1. 1Choose what to show and how it looks.
  2. 2Copy the line of code.
  3. 3Paste it into your page's HTML, where the widget should go.

Choose your widget

Show
Size

The headline and one line of detail.

Theme
The six dams
Link to the dashboard

The credit to the City of Cape Town always shows. This adds a link to the full dashboard.

Preview

This is the live widget, with today's figures.

Embed code

Paste this into your page's HTML where the widget should go. It fits the width you give it and sets its own height.

<script src="https://www.waterdashboard.co.za/widget.js" data-variant="level" async></script>

Build your own

Want it to match your site, or to use the figures in a blog post, a newsletter or an app? The same data is free as JSON. No key and no sign-up, and any website can call it. Please credit the City of Cape Town.

  • /api/v1/summary

    Today's level, how it compares with last year and normal, the outlook, the City's restriction level and this week's tip.

  • /api/v1/dams

    Each of the six big dams: its latest level and the same date last year.

  • /api/v1/history?from=2025-01-01

    Combined storage by date, back to 2000. Use from and to as YYYY-MM-DD.

A minimal example

fetch("https://www.waterdashboard.co.za/api/v1/summary")
  .then((r) => r.json())
  .then((d) => {
    document.querySelector("#dams").textContent =
      `Cape Town's dams are ${Math.round(d.percent)}% full. Data: City of Cape Town.`
  })

Good to know

  • Free for any website or blog. Please keep the credit to the City of Cape Town.
  • The figures come from the City's published dam readings. We check for new ones twice a day.
  • No cookies, no tracking scripts and no other code on your page: the widget is one small script and an iframe.