The MDB Climate Finance Dashboard is a self-contained web component. It renders inside a Shadow DOM, has no framework dependencies, and works with any HTML page — static sites, CMS platforms, or single-page applications.
Include the script at the end of the
<body>. It registers the
<mdb-dashboard>
custom element automatically.
<script src="https://mdb-dashboard-widget.vercel.app/widget.js"></script>Drop the element wherever you want the dashboard to appear.
<mdb-dashboard></mdb-dashboard>
The widget is fully responsive and fills the width of its parent container. For the best experience, place it
inside an element that is at least 320px wide. No
height needs to be set — the component manages its own height based on the active tab and content.
All styles are encapsulated within the Shadow DOM, so the widget will not affect or be affected by your existing CSS. The Inter font is bundled with the widget. No additional stylesheets are required.
Data is served by a serverless API endpoint backed by Airtable. Chart titles, descriptions, labels, series names, and colours are all managed in Airtable — content editors can update them without code changes.
The API filters by year and groups by country group. It accepts an optional
?year=
query parameter and defaults to the latest published year. Responses are cached at the edge for 5 minutes with
stale-while-revalidate, so the widget loads quickly without hitting Airtable on every page view.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
</head>
<body>
<!-- Place the widget anywhere in your page -->
<mdb-dashboard></mdb-dashboard>
<!-- Load the script at the end of the body -->
<script src="https://mdb-dashboard-widget.vercel.app/widget.js"></script>
</body>
</html>