---
title: "How to Embed the Eturnity Solar Calculator as an iFrame"
url: "https://eturnity.productfruits.help/en/article/how-to-embed-the-eturnity-solar-calculator-as-an-iframe"
language: "en"
last_updated: "2026-06-04T14:23:02.629Z"
---

# How to Embed the Eturnity Solar Calculator as an iFrame

Learn how to integrate the Eturnity solar calculator directly into your website using dynamic iframe technology. This guide provides step-by-step instructions for both simple and advanced iframe implementations, including dynamic resizing and parameter configuration.

## 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:

```plaintext
<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](https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/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](mailto:support@eturnity.com).