Carbon Countdown Badge

[shilojones]

Carbon Countdown Badge

What are we trying to accomplish
We are trying to create a badge that is easy for contractors (e.g. plumbers, electricians, HVAC technicians, solar contractors, insulation and weatherization contractors, etc.) to install on the their Website. The badge will display a live running total of the tons of carbon they've helped save through the installation of energy efficient and sustainable energy generation solutions. We hope that contractors will see the Carbon Countdown Badge as a unique trust seal that builds credibility with prospective customers enhancing their professional image and converting more customers.

Functional Requirements

• Badge Display: The badge must visually display the total tons of carbon saved by the contractor, updated dynamically.
• Data Integration: The badge must pull data dynamically from the Carbon Offset Verification model to update the carbon savings in real-time.
• Ease of Installation: The badge must be easy for contractors to embed on their websites, requiring minimal technical knowledge.
• Linking Capability: Clicking on the badge should link to a detailed page or popup explaining how the carbon savings were calculated and providing more details about the contractor's sustainable practices.
• Compatibility: The badge should be compatible with common web platforms used by contractors, such as WordPress, Wix, and Squarespace.
• Responsiveness: The badge should be visually appealing and functional on various devices and screen sizes.
• Customizability: Contractors should be able to slightly customize the badge (e.g., size adjustments) to fit the design of their website.

Technical Considerations

• Web Technologies: Use HTML, CSS, and JavaScript for badge implementation to ensure broad compatibility and ease of integration.
• Data Fetching: Implement AJAX or WebSockets for dynamic data fetching from the Carbon Offset Verification model API to update the carbon savings figure in real-time.
• Secure Linking: Ensure that the hyperlink to the detailed page or popup is secured and opens in a new tab to keep the contractor's website open in the browser.
• API Integration: Develop or integrate with an API that provides the necessary data from the Carbon Offset Verification model, ensuring it supports CORS (Cross-Origin Resource Sharing) for web-based access.
• Responsive Design: Use media queries in CSS to ensure the badge is responsive and adjusts size and layout based on the viewing device.
• Documentation: Provide instructions on how to embed and customize the badge
• Testing and Compatibility: Test the badge extensively across different browsers (like Chrome, Firefox, Safari) and devices to ensure consistent performance and appearance.
• Error Handling: Implement robust error handling to manage issues with data fetching or API downtime, ensuring the badge shows a fallback message or cached data if the live data feed is unavailable.

Example Code Snippet

Here is an example of what the HTML code snippet for embedding the badge might look like:

<a href="https://www.climate-cooperative.org/partner?id=contractor_id" target="_blank">
    <div id="carbon-countdown-badge">
        <img src="https://www.climate-cooperative.org/badge.svg"/>
        <span id="carbon-saved">Loading...</span>
    </div>
</a>
<script src="https://www.climate-cooperative.org/badge-loader.js"></script>

This code snippet assumes that there’s a JavaScript file (badge-loader.js) that handles fetching the data and updating the badge display. The id in the URL query (contractor_id) would be replaced by each contractor’s unique identifier to fetch and display their specific carbon savings data.