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:

Stellen Sie sicher, dass der iFrame des Rechners eine eindeutige id auf der Seite hat (z. B. id="iframe-eturnity").
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:

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