CO₂-Rechner kostenlos auf Ihrer Webseite einbinden

Einfacher Klimaschutz für alle

Klimaschutz geht uns alle an! Mit der kostenlosen Einbindung unseres CO₂-Rechners können Sie den Nutzern Ihrer Website eine einfache und zuverlässige Methode zur Verfügung stellen, deren persönliche CO₂-Bilanz sowie CO₂-Reduktionsmöglichkeiten zu ermitteln. Schützen Sie jetzt das Klima und noch intakte Ökosysteme mit dem CO₂-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₂-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₂-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 CO₂-Autorechner
• flight – der CO₂-Flugrechner
• home – der CO₂-Wohnen-Rechner
• food – der CO₂-Ernährungs-Rechner

Individuelle optische Anpassungen des CO₂-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 CO₂-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>