CO2-Rechner kostenlos auf Ihrer Webseite

Einfacher Klimaschutz für alle

Klimaschutz geht uns alle an! Mit unserem kostenlosen CO2-Rechner können Sie auch den Nutzern Ihrer Website eine einfache und zuverlässige Methode zur Verfügung stellen, ihre persönliche CO2-Bilanz zu ermitteln.

Integrieren Sie dazu einfach unseren Rechner in Ihre Website, indem Sie Ihren Editor in den html-Modus schalten und den jeweiligen Codeschnipsel an die gewünschte Stelle kopieren. Fertig!

CO2-Rechner

Sie können unseren 'CO2-Rechner' kostenlos auf Ihrer Webseite veröffentlichen und Ihren Nutzern zur Verfügung stellen:

<script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.1/webcomponents-loader.js"></script>
<script type="text/javascript" src="https://www.naturefund.de/typo3conf/ext/nf_co2calc/Resources/Public/JS/calc.min.js"></script>
<co2-calculator>Dieser Browser kann unseren CO<sub>2</sub>-Rechner leider nicht darstellen. Entweder ist Javascript abgeschaltet oder dieser Browser ist zu alt.</co2-calculator>

Varianten

Das oben dargestellte Snippet stellt unseren CO2-Rechner in der Standardversion dar, so wie er auch auf unserer Seite hier gezeigt wird. Standardversion heißt hier, das alle verschiedenen CO2-Rechner zusammen mit einer Übersichtsseite in der aktuellen Sprache angezeigt werden.

Möchten Sie z.B. nur den Flugrechner bei sich einbinden, dann ändern Sie die dritte Zeile in:

<co2-calculator type="flight">Dieser Browser kann unseren CO<sub>2</sub>-Rechner leider nicht darstellen. Entweder ist Javascript abgeschaltet oder dieser Browser ist zu alt.</co2-calculator>

Als Werte für type ist folgendes möglich:

  • car - der CO2-Autorechner
  • flight - der CO2-Flugrechner
  • home - der CO2-Wohnen-Rechner
  • food - der CO2-Ernährungs-Rechner

Optische Anpassungen

Sie können unseren CO2-Rechner in verschiedenen Aspekten anpassen.

  1. Schriftfarbe - Der CO2-Rechner übernimmt die allgemeine Schriftfarbe Ihrer Webseite. Sie können aber auch eine Schriftfarbe für den CO2-Rechner allein einstellen, indem Sie das <co2-calculator>-Tag direkt per CSS-color formatieren.
  2. Schriftart - Sie können die verwendete Schriftart anpassen, indem Sie direkt die font-Eigenschaft des <co2-calculator>-Tag einstellen.
  3. Hervorhebungsfarbe - Der CO2-Rechner übernimmt hier entweder den Wert der globalen CSS-Eigenschaft --theme-primary, oder den Wert von --co2-primary, wenn dieser direkt auf dem <co2-calculator>-Tag angewendet wird.
  4. Sekundärfarbe - Das ist hier die Farbe des Buttons für "Bäume pflanzen". Das funktioniert wie bei der Hervorhebungsfarbe, nur das die CSS-Eigenschaften --theme-secondary bzw. --co2-secondary benutzt werden.
  5. Hintergrundfarbe des Tabs - Hier übernimmt der Rechner die am <co2-calculator>-Tag eingestellte CSS-Variable --tab-background-color

Beispiel:

<co2-calculator style="font: 12px/1.4 Arial; font-color: red; --co2-primary: blue">...</co2-calculator>

Veranstaltungen klimaneutral(er) gestalten und ausgleichen!

Mit unserem Blue Planet Certificate können Sie übrigens auch Ihre Veranstaltungen klimaneutral gestalten und Ihren ökologischen Fußabdruck mit wenigen Klicks ausgleichen. Mehr Infos hier:

Veranstaltung klimaneutral

Naturefund e. V.
Karl-Glässing-Straße 5
65183 Wiesbaden

+49 611 504 581 011
info(at)naturefund.de

Jetzt spenden

Registriert beim Registergericht Wiesbaden, VR 3739

Umsatzsteuer-Identifikationsnummer: DE 293241718

Freistellungsbescheid: Als gemeinnützige Körperschaft
befreit von der Körperschaftssteuer gem. §5 Abs.1 Nr.9 KStG
unter der Steuernummer 43/250/76281.

Ihre Spende an Naturefund kann steuerlich abgesetzt werden.