How to Embed the Eturnity Solar Calculator as an iFrame

What is iFrame Integration?

The iFrame integration allows you to embed the Eturnity solar calculator directly into your website, providing a seamless experience for your visitors. Unlike the standalone variant where users are redirected to a separate page, the iFrame integration displays the calculator within your website's layout, maintaining your branding and user flow.

The Eturnity solar calculator includes advanced iFrame Resizer technology that automatically adjusts the iframe height based on the calculator content, ensuring optimal display across all devices and scenarios.

Key Benefit: With iframe integration, your website logo and branding remain visible while users interact with the solar calculator, creating a more cohesive brand experience compared to standalone integration.

Integration Methods

There are two approaches to iframe integration:

• Simple Static iFrame: Basic implementation with fixed dimensions
• Dynamic iFrame with Auto-Resizing: Advanced implementation with automatic height adjustment

Simple Static iFrame Implementation

For basic integration, use this HTML code structure:

<div class="iframe-container"> <iframe frameborder="0" style="height: 700px; width: 100%; overflow: hidden;" src="https://solarrechner.eturnity.io/your_identifier/?embedded=true"> </iframe> </div>

Important: Replace your_identifier with your actual Eturnity identifier provided during your account setup.

The recommended dimensions are:

• Height: 700px minimum
• Width: 100% for responsive design

Dynamic iFrame with Auto-Resizing

For optimal user experience, implement the dynamic iframe that automatically adjusts its height based on calculator content.

Dynamic iFrame Implementation Steps

Prerequisites

• jQuery framework must be loaded on your website
• Your Eturnity calculator identifier
• Web development access to modify your website code

Step 1: Load the iFrame Resizer Script

Add the iFrame Resizer client script to your website. Replace your_identifier with your identifier:

<script src="https://solarrechner.eturnity.io/your_identifier/static/iframe-resizer-client.js"></script>

Step 2: Add the iFrame to Your Page

Insert the iframe code where you want the calculator to appear:

<iframe id="iframe-eturnity" src="https://solarrechner.eturnity.io/your_identifier/?embedded=true&offsettop=120" frameborder="0"> </iframe>

Step 3: Initialize the Dynamic Resizer

Add this JavaScript code to activate the auto-resizing functionality:

<script> jQuery(document).ready(function(){ jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false }); }); </script>

Step 4: Add the Final Resizer Script

Include this additional script right after the iframe implementation:

<script> iFrameResize({ log: true, checkOrigin: false }, '#iframe-eturnity'); </script>

WordPress-Specific Implementation

For WordPress websites, use this approach to properly load the resizer script:

Add this code to your theme's functions.php file:

function iFrame_Resizer() { wp_register_script( 'iFrameResizer', 'https://solarrechner.eturnity.io/your_identifier/static/iframe-resizer-client.js', array(), '', true ); wp_enqueue_script( 'iFrameResizer' ); } add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' );

Remember: Replace your_identifier with your actual Eturnity identifier.

URL Parameters and Configuration

The iframe URL supports several parameters to customize the calculator behavior:

Required Parameters

• embedded=true - Enables iframe mode and removes external navigation elements

Optional Parameters

• lang - Sets the calculator language (e.g., lang=en, lang=de, lang=fr)
• offsettop - Adjusts for sticky headers (value should match your header height in pixels)
• cookies_popup - Controls cookie consent display (true or false)

Example with Parameters

https://solarrechner.eturnity.io/example_energy/?embedded=true&lang=en&offsettop=120&cookies_popup=false

Host-page consent bridge (optional)

If the calculator is embedded on your website and you rely on the built-in consent UI inside the iframe (i.e. you do not provide consent via the cookies_popup / cookies_accepted URL parameters), load and initialize the Eturnity consent bridge script so consent-related data can get stored on your (parent) side. Some browsers and setups block or isolate third-party cookies; for these cases, the bridge uses postMessage (and host-side storage) so consent can still work reliably.

To implement the consent bridge:

1. Ensure the calculator iframe has a unique id on the page (e.g., id="iframe-eturnity").
2. Include the script wherever you normally load page assets—for example in <head> or before </body>: 
   <script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>

3. Initialize the bridge only after the script has finished loading and the iframe element is already in the DOM:

<script>
  eturnityConsentBridge('iframe-eturnity', {
    type: 'solar_calculator', // or 'heating_calculator' or 'e_mobility_configurator'
  });
</script>

Note: Replace iframe-eturnity with your iframe’s real id, and set type to the product that matches the iframe. For troubleshooting, you can add logs: true to the options object.

The full API, message contract, and edge cases are available in the eturnity-consent-bridge.md documentation on jsDelivr.

Troubleshooting Common Issues

Calculator Not Displaying

• Verify your identifier is correct in all URL references
• Ensure embedded=true parameter is included
• Check that jQuery is loaded before the iframe resizer script

Height Not Adjusting Automatically

• Confirm the iframe resizer script is loading from the correct URL
• Verify the iframe ID matches the JavaScript selector
• Check browser console for JavaScript errors

Styling Issues

• Adjust the offsettop parameter to account for sticky headers
• Ensure sufficient container width (minimum 320px for mobile)
• Test across different devices and screen sizes

Best Practices

Performance Optimization

• Load the iframe resizer script asynchronously when possible
• Place iframe code after critical page content
• Consider lazy loading for below-the-fold placements

User Experience

• Provide clear context about what the calculator does
• Ensure adequate surrounding whitespace
• Test the complete user flow from calculation to lead submission

For questions about iframe implementation or to request your calculator identifier, contact support@eturnity.com.