CO2-Rechner kostenlos auf Ihrer Webseite einbinden

Einfacher Klimaschutz für alle

Klimaschutz geht uns alle an! Mit der kostenlosen Einbindung unseres CO2-Rechners können Sie den Nutzern Ihrer Website eine einfache und zuverlässige Methode zur Verfügung stellen, deren persönliche CO2-Bilanz sowie CO2-Reduktionsmöglichkeiten zu ermitteln. Schützen Sie jetzt das Klima und noch intakte Ökosysteme mit dem CO2-Rechner von Naturefund.

Integrieren Sie 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!

CO₂-Rechner kostenlos anbieten

Sie können unseren 'CO₂-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>

Wichtig: Der Code '<co2-calculator>' muß in der oben angegebenen Form im HTML-Quellcode Ihrer Webseite auftauchen. Für manche CMS sind dafür spezielle Einstellungen nötig.

Verschiedene Varianten des CO₂-Rechners

Das oben dargestellte Snippet stellt unseren CO₂-Rechner in der Standardversion dar, so wie er auch auf unserer Website gezeigt wird. Standardversion heißt hier, dass alle verschiedenen CO₂-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

Individuelle optische Anpassungen des CO2-Rechners

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

  1. Schriftfarbe – Der CO₂-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 CO₂-Rechner übernimmt hier entweder den Wert der globalen CSS-Eigenschaft --theme-primary, oder den Wert von --co2-primary, wenn dieser direkt auf den <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 dass 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.

Natur schützen

Unterstützen Sie unsere Projekte und schützen Sie Lebensräume.