Puffin Calculator iFrame Integration

This page demonstrates how to embed the Puffin Carbon Offset Calculator into your website using an iFrame.

Integration Code

<iframe 
  src="http://localhost:8080"
  id="puffin-calculator-iframe"
  width="100%" 
  height="600" 
  frameborder="0" 
  allow="clipboard-write"
  title="Puffin Carbon Offset Calculator"
></iframe>

<script>
  // Optional: Handle iframe resizing for responsive behavior
  window.addEventListener('message', function(event) {
    if (event.data.type === 'puffin-calculator-resize') {
      const iframe = document.getElementById('puffin-calculator-iframe');
      if (iframe) {
        // Add a bit of extra space to avoid scrollbars
        iframe.style.height = (event.data.height + 50) + 'px';
      }
    }
  });
</script>

Live Example

Here's the calculator embedded in this page:

Advanced Usage

You can also communicate with the calculator through the iframe to set options or perform actions:

// Access the iframe's window object
const calculatorFrame = document.getElementById('puffin-calculator-iframe');

// Set the theme (once the iframe has loaded)
calculatorFrame.addEventListener('load', function() {
  // Access the API methods
  calculatorFrame.contentWindow.PuffinCalculator.setTheme('dark');
  
  // Reset the calculator to initial state
  calculatorFrame.contentWindow.PuffinCalculator.resetCalculator();
});