Embed Kausal Watch content on your own website
A small snippet of JavaScript is all it takes to show your climate action progress or the latest indicator data to your visitors, kept automatically up to date as your plan changes.
How it works
Kausal Watch supports displaying its contents inside an embed on any external web page. There are two views available for embedding:
- Actions most recently updated: A selection of the most recently updated actions of a plan, each shown as a card with its status and implementation phase.
- Single indicator: A graph showing the data for a chosen indicator.
Each embed is added with a single <script> tag placed wherever you want the embed to appear on the page. JavaScript automatically adjusts the embed height to fit the available width, so it works responsively alongside the rest of your content.
Example code
Most recent actions
To show your plan’s most recently updated actions, place the following snippet on your page. Adjust data-count to change how many actions are shown, and set data-header to “true” to show a header above the embed.
<script
class="kausal-watch-embed"
async
data-version="v1"
data-version-minor="1"
data-type="actions-recent"
data-count="6"
data-header="false"
src="https://sunnydale.watch.fi.kausal.tech/static/embed-a.js">
</script>Single indicator
To show a single indicator, find the indicator’s ID from its URL in Kausal Watch (e.g. indicators/588) and use it as the data-type value:
<script
class="kausal-watch-embed"
async
data-version="v1"
data-version-minor="1"
data-type="indicators/588"
src="https://sunnydale.watch.fi.kausal.tech/static/embed-a.js">
</script>