---
title: "So integrieren Sie den Eturnity Solarrechner als iFrame"
url: "https://eturnity.productfruits.help/de/article/so-integrieren-sie-den-eturnity-solarrechner-als-iframe"
language: "de"
last_updated: "2026-06-04T14:22:29.493Z"
---

# So integrieren Sie den Eturnity Solarrechner als iFrame

Lernen Sie, wie Sie den Eturnity Solarrechner direkt in Ihre Website integrieren, indem Sie dynamische iframe-Technologie verwenden. Dieser Leitfaden bietet Schritt-für-Schritt-Anweisungen für einfache und erweiterte iframe-Implementierungen, einschließlich dynamischer Größenanpassung und Parameterkonfiguration.

## Was ist iFrame-Integration?

Die iFrame-Integration ermöglicht es Ihnen, den Eturnity Solarrechner direkt in Ihre Website zu integrieren und Ihren Besuchern eine nahtlose Erfahrung zu bieten. Im Gegensatz zur eigenständigen Variante, bei der Benutzer auf eine separate Seite weitergeleitet werden, zeigt die iFrame-Integration den Solarrechner innerhalb des Layouts Ihrer Website an und behält dabei Ihr Branding und den Benutzerfluss bei.

Der Eturnity Solarrechner verfügt über fortschrittliche **iFrame Resizer**\-Technologie, die die iframe-Höhe automatisch basierend auf dem Rechnerinhalt anpasst und so eine optimale Darstellung auf allen Geräten und in allen Szenarien gewährleistet.

> **Hauptvorteil:** Mit der iframe-Integration bleiben das Logo und die Markenidentität Ihrer Website sichtbar, während Benutzer mit dem Solarrechner interagieren, was im Vergleich zur eigenständigen Integration eine kohärentere Markenerfahrung schafft.

## Integrationsmethoden

Es gibt zwei Ansätze für die iframe-Integration:

-   **Einfaches statisches iFrame:** Grundlegende Implementierung mit festen Abmessungen
-   **Dynamisches iFrame mit automatischer Größenanpassung:** Erweiterte Implementierung mit automatischer Höhenanpassung

### Einfache statische iFrame-Implementierung

Für die Grundintegration verwenden Sie diese HTML-Code-Struktur:

`<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>`

**Wichtig:** Ersetzen Sie `your_identifier` durch Ihre tatsächliche Eturnity-Kennung, die Sie bei der Kontoeinrichtung erhalten haben.

Die empfohlenen Abmessungen sind:

-   **Höhe:** mindestens 700px
-   **Breite:** 100% für responsives Design

### Dynamisches iFrame mit automatischer Größenanpassung

Für eine optimale Benutzererfahrung implementieren Sie das dynamische iframe, das seine Höhe automatisch basierend auf dem Rechnerinhalt anpasst.

## Implementierungsschritte für dynamisches iFrame

### Voraussetzungen

-   Das jQuery-Framework muss auf Ihrer Website geladen sein
-   Ihre Eturnity Solarrechner-Kennung
-   Webentwicklungszugang zur Änderung Ihres Website-Codes

### Schritt 1: Das iFrame Resizer Script laden

Fügen Sie das iFrame Resizer Client-Script zu Ihrer Website hinzu. Ersetzen Sie `your_identifier` durch Ihre Kennung:

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

### Schritt 2: Das iFrame zu Ihrer Seite hinzufügen

Fügen Sie den iframe-Code dort ein, wo der Solarrechner erscheinen soll:

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

### Schritt 3: Den dynamischen Resizer initialisieren

Fügen Sie diesen JavaScript-Code hinzu, um die automatische Größenanpassungsfunktionalität zu aktivieren:

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

### Schritt 4: Das finale Resizer-Script hinzufügen

Fügen Sie dieses zusätzliche Script direkt nach der iframe-Implementierung hinzu:

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

## WordPress-spezifische Implementierung

Für WordPress-Websites verwenden Sie diesen Ansatz, um das Resizer-Script ordnungsgemäß zu laden:

Fügen Sie diesen Code zur `functions.php`\-Datei Ihres Themes hinzu:

`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' );`

**Denken Sie daran:** Ersetzen Sie `your_identifier` durch Ihre tatsächliche Eturnity-Kennung.

## URL-Parameter und Konfiguration

Die iframe-URL unterstützt mehrere Parameter zur Anpassung des Solarrechner-Verhaltens:

### Erforderliche Parameter

-   `embedded=true` - Aktiviert den iframe-Modus und entfernt externe Navigationselemente

### Optionale Parameter

-   `lang` - Setzt die Solarrechner-Sprache (z.B. `lang=en`, `lang=de`, `lang=fr`)
-   `offsettop` - Passt für feste Kopfzeilen an (Wert sollte der Höhe Ihrer Kopfzeile in Pixeln entsprechen)
-   `cookies_popup` - Steuert die Cookie-Einverständnis-Anzeige (`true` oder `false`)

### Beispiel mit Parametern

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

## Host-Page Consent Bridge (optional)

Wenn der Rechner auf Ihrer Website eingebettet ist und Sie sich auf die integrierte Consent-UI innerhalb des iFrames verlassen (d. h. Sie geben die Zustimmung nicht über die URL-Parameter `cookies_popup` / `cookies_accepted` an), laden und initialisieren Sie das Eturnity Consent Bridge-Skript, damit einwilligungsbezogene Daten auf Ihrer (Parent-)Seite gespeichert werden können. Einige Browser und Setups blockieren oder isolieren Drittanbieter-Cookies; für diese Fälle verwendet die Bridge `postMessage` (und hostseitigen Speicher), damit die Einwilligung weiterhin zuverlässig funktionieren kann.

So implementieren Sie die Consent Bridge:

1.  Stellen Sie sicher, dass der iFrame des Rechners eine eindeutige `id` auf der Seite hat (z. B. `id="iframe-eturnity"`).
2.  Fügen Sie das Skript dort ein, wo Sie normalerweise Seiten-Assets laden – zum Beispiel im `<head>` oder vor `</body>`:   
    `<script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>`

3\. Initialisieren Sie die Bridge erst, nachdem das Skript vollständig geladen wurde und das iFrame-Element bereits im DOM vorhanden ist:

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

> **Hinweis:** Ersetzen Sie `iframe-eturnity` durch die tatsächliche `id` Ihres iFrames und setzen Sie `type` auf das Produkt, das dem iFrame entspricht. Zur Fehlerbehebung können Sie `logs: true` zum Optionsobjekt hinzufügen.

Die vollständige API, der Nachrichtenvertrag und Sonderfälle sind in der Dokumentation [eturnity-consent-bridge.md](https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.md) auf jsDelivr verfügbar.

## Fehlerbehebung häufiger Probleme

### Solarrechner wird nicht angezeigt

-   Überprüfen Sie, ob Ihre Kennung in allen URL-Referenzen korrekt ist
-   Stellen Sie sicher, dass der Parameter `embedded=true` enthalten ist
-   Prüfen Sie, ob jQuery vor dem iframe resizer script geladen wird

### Höhe passt sich nicht automatisch an

-   Bestätigen Sie, dass das iframe resizer script von der korrekten URL lädt
-   Überprüfen Sie, ob die iframe-ID mit dem JavaScript-Selektor übereinstimmt
-   Prüfen Sie die Browser-Konsole auf JavaScript-Fehler

### Styling-Probleme

-   Passen Sie den `offsettop`\-Parameter für feste Kopfzeilen an
-   Stellen Sie ausreichende Container-Breite sicher (mindestens 320px für Mobilgeräte)
-   Testen Sie auf verschiedenen Geräten und Bildschirmgrößen

## Best Practices

### Performance-Optimierung

-   Laden Sie das iframe resizer script wenn möglich asynchron
-   Platzieren Sie den iframe-Code nach kritischem Seiteninhalt
-   Erwägen Sie Lazy Loading für Platzierungen unterhalb der Falzlinie

### Benutzererfahrung

-   Bieten Sie klaren Kontext darüber, was der Solarrechner tut
-   Sorgen Sie für ausreichenden umgebenden Leerraum
-   Testen Sie den kompletten Benutzerfluss von der Berechnung bis zur Lead-Übermittlung

Für Fragen zur iframe-Implementierung oder um Ihre Solarrechner-Kennung anzufordern, kontaktieren Sie [support@eturnity.com](mailto:support@eturnity.com).