eturnity-logoeturnity-logoeturnity-logoeturnity-logo
  • Für Energieversorger
    • Solar
      • Solarrechner
      • Solarexperte
    • Heizung
      • Heizungsrechner
      • Heizungsexperte
    • Elektromobilität
      • E-Mobilitäts-Konfigurator
    • Kollaboration
      • Lead Manager
    • Diverses
      • Preise
  • Fürs Handwerk
    • Solar
      • Solarrechner
      • Solarexperte
    • Heizung
      • Heizungsrechner
      • Heizungsexperte
    • Elektromobilität
      • E-Mobilitäts-Konfigurator
    • Diverses
      • Preise
  • Anbieter
    • Solar
      • Partnernetzwerk
      • Preis-und Datenabgleich
      • Solarrechner
      • Lead Manager
    • Heizung
      • Partnernetzwerk
      • Preis-und Datenabgleich
      • Heizungsrechner
      • Lead Manager
      • Digitaler Materialauszug
    • Elektromobilität
      • Partnernetzwerk
      • Preis-und Datenabgleich
      • E-Mobilitäts-Konfigurator
      • Lead Manager
      • Digitaler Materialauszug
    • Diverses
      • Preise
  • Ressourcen
    • Blog
  • Über Uns
    • Referenzen
    • Jobs
    • Team
    • Kontakt
  • Österreich
    • Deutschland
    • Schweiz
Kontakt aufnehmen
✕
Published by Bettina Enser on 21. Mai 2021
Categories
  • Allgemein
  • Solar
  • ZEV
Tags
  • eeg
  • einspeisevergütung
  • solar pv
solarrechner-einfach-als-iframe-mit-dynamischer-hoehe-einbinden

Dynamisches iFrame macht’s möglich: Flexible Integration des Solarrechners

Das Einbinden von iFrames (Inlineframe) ist unkompliziert und deshalb noch immer eine gern genutzte Lösung, um externe Inhalte, wie den Solarrechner, auf einer Website darzustellen. Durch die Erweiterung des iFrames mit einer dynamischen Höhe, lassen sich externe Inhalte noch besser als nützliches flexibles Gestaltungs- und Marketing-Instrument einsetzen.

Wieso den Solarrechner mit einem dynamischen iFrame einbinden?

Wenn Sie die Nutzer Ihrer Website nicht unbedingt auf eine weitere Domain schicken und ihnen trotzdem den Solarrechner direkt vorstellen möchten, dann bietet sich der Einsatz eines iFrames an, wodurch der Inhalt direkt in die eigene Webseite (in einer Art Rahmen) eingebunden wird. Damit das auch gut aussieht, empfehlen wir die Verwendung von iFrames, welche sich aktiv der sich verändernden Grösse des eingebundenen Inhalts anpassen – eben dynamisch.

Vor- und Nachteile des iFrames mit dynamischer Höhe:

Durch das dynamische iFrame auf Javascript-Basis lassen sich Inhalte mit sich verändernder Höhe ohne unschöne Platzhalter oder Abstände in eine Website integrieren. Bedarf der eingebundene Inhalt, bspw. der Solarrechner einer bestimmten Höhe, passt sich das iFrame automatisch an (iFrame-Resizer). Dies ist gerade bei responsiven Webseiten wichtig.

Hingegen dem klassischen iFrame, ist die Implementierung des iFrames mit dynamischer Höhe etwas aufwendiger. Der Grund: Auch das Javascript sowie einige wenige Zeilen Code müssen eingebunden werden. Durch den zusätzlichen Code erhöht sich auch die Ladezeit der Webseite (Pagespeed), jedoch nur marginal.

Dennoch ist die Einbindung des Solarrechners über ein dynamisches iFrame sinnvoll. Die Nutzer können das Tool unmittelbar nutzen, ohne dass sie den Umweg auf eine andere Seite nehmen müssen. Der Solarrechner wird als regulärer Bestandteil der Webseite wahrgenommen und nicht als «externes» Tool.

Der Mehrwert ist direkt sichtbar und die Absprungrate kann minimiert werden. Zu beachten ist, dass dies nur mit speziell dafür programmierten Inhalten funktioniert. Ist der eingebundene Inhalt nicht ebenfalls mit den entsprechenden Funktionen ausgestattet, funktioniert ein dynamisches iFrame nicht.

Hinweis: Der gelbe Rahmen wird grundsätzlich nicht angezeigt. Für dieses Beispiel wurde er bewusst eingefügt um aufzuzeigen, in welchem Bereich der Solarrechner eingebunden ist.

Wie bindet man ein iFrame dynamisch ein?

Integration des iFrames mit dynamischer Höhe

Im Eturnity Solarrechner ist eine Programmierung implementiert, welche die jeweils optimale Grösse des iFrames meldet (iFrame-Resizer). Damit wird der, als iFrame in die Webseite integrierte Solarrechner immer optimal dargestellt. Zur Nutzung müssen folgende Schritte durchgeführt werden:

  1. Sicherstellen, dass das Framework «jQuery» vorhanden ist und geladen wird
  2. Laden des Skripts https://de.eturnity.eu/rechner/example_energy/?embedded=true («muster_solar» mit ihrem Identifikator ersetzen)
  3. Integration des iFrames mit folgendem Code:
    <iframe id="iframe-eturnity" src="https://de.eturnity.eu/rechner/example_energy/?embedded=true&offsettop=120" frameborder="0"></iframe>

    (Der Wert von Offset sollte der Höhe eines allfällig vorhandenen Sticky Headers entsprechen, der Offset-Wert ist optional)
  4. Starten des Skripts mit folgendem Code:
    <script>
       jQuery(document).ready(function(){
          jQuery("#iframe-eturnity").iFrameResize({ log: true });
       });
       (jQuery);
    </script>
 

Sie verwenden WordPress als CMS-System?


Bei WordPress laden Sie das Skript optimalerweise über die functions.php im Child-Template. Integrieren Sie dafür untenstehenden Code in Ihre functions.php:

function iFrame_Resizer() {
 wp_register_script( 'iFrameResizer', 'https://de.eturnity.eu/rechner/example_energy/?embedded=true', array(), '', true );
 wp_enqueue_script( 'iFrameResizer' );
  }
add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' );
 

Fazit

Den Besuchern Ihrer Website die Nutzung eines Tools, wie den Solarrechner, direkt anzubieten liefert einen starken Mehrwert. Die Einbindung über ein iFrame mit dynamischer Höhe ist in diesem Falle besonders sinnvoll, da es sich je nach Device im Design anpasst und der Website-Inhalt den Solarrechner optisch umfliesst.

Unsere Anleitung soll Ihnen als Hilfestellung dienen, den Eturnity Solarrechner als dynamisches iFrame einzubinden. Auf Ihrer Webseite haben Sie so zum Schluss ein zusätzliches Gestaltungs- und Marketinginstrument umgesetzt.

Bild: © Pexels

 

Bettina Enser


Bettina Enser ist die Verantwortliche für Marketing und Kommunikation bei der Eturnity AG. Sie liefert Einblicke in Themen rund um die Vermarktung von Erneuerbaren Energiesystemen. Bei Fragen zum Beitrag wenden Sie sich an bettina.enser@eturnity.com

 

Related posts

salzbatterie-der-innovenergy
1. Feber 2022

Speichern mit Salz: Wie lohnenswert sind Salzbatterien?


Weiterlesen
gruppenfoto-sales-team-eturnity
8. Dezember 2021

Hey Sales-Team, wie war euer Jahr so?


Weiterlesen
mann-bei-der-installation-einer-solarzelle
12. November 2021

So entscheiden sich Endkunden für Sie


Weiterlesen

Service

  • FAQ
  • Jobs
  • Impressum
  • Datenschutz
  • Vertriebspartner
  • Schnittstellen / API

Kontakt

  • Kontakt

Ressourcen

  • Blog

Über uns

  • Referenzen
  • Labels
  • Partner
  • Team
  • Engagement

Produkte

  • Solarrechner
  • Heizungsrechner
  • E-Mobilitätskonfigurator
  • Solarexperte
  • Heizungsexperte

Newsletter

© Eturnity AG
Kontakt aufnehmen
  • Deutschland
  • Österreich
  • Schweiz