Embed

The footprintr.me carbon calculator is designed to be embedded into other websites, this means you can offer it to your visitors on your own website.

The simplest way to add it to your website is via an iframe using the code below. footprintr.me uses a responsive design so will fit comfortably into any space you choose to give it on your website.

<iframe id="footprintr" src="https://footprintr.me/?embed=true" scrolling="auto"></iframe>

For an example of how the calculator looks when embedded on another site please visit climatestewards.org/offset.

  • The main footprintr.me colour can be changed by adding a CSS colour code (six characters, no #) to the iframe code:
    <iframe id="footprintr" src="https://footprintr.me/?embed=true&c=f5a800" scrolling="auto"></iframe>
    We check that the CSS colour code is valid, not that it is sensible ;)
  • Text colour on the main colour will be adjusted according to the brightness of the main colour chosen, however, if you need to override this, say, to use black text rather than white then add &o=true to the URL.
  • To stop two scrollbars appearing (one for the main page, one for the iframe) the CSS overflow:hidden; should be applied to the page’s <body> tag.

If you get stuck, please give us a shout!

We are also able to customise the calculator to your needs, so if you would like your own version of the calculator, please get in touch. Please note, a fee may apply for such customisation work depending on what is required.