Mit der richtigen Anleitung ist das Einbinden von dynamischen iFrames einfach umsetzbar. Externe Tools, wie der Eturnity Solarrechner lassen sich so auf der Webseite flexibel integrieren, ohne den Besucher auf eine andere Domain zu leiten. Das macht dynamische iFrames zu einem nützlichen Javascript-Marketing- und Gestaltungs-Element.

Warum lohnt es sich mittels dynamischem iFrame den Solarrechner einzubinden?

Ein iFrame mit dynamischer Höhe ist besonders dann praktisch, wenn Sie Absprungraten minimieren wollen. Das ist möglich, indem Sie gleich auf der Website den Mehrwert bieten können, nach dem der Besucher sucht – ohne dass er auf eine neue Domain gelangen muss.

Der weitaus größte Vorteil liegt in der flexiblen Skalierung (iFrame-Resizer). Hingegen der Einbindung des Solarrechners mit klassischem iFrame, müssen Sie so keinen Platz einplanen. Egal wie hoch das dynamische iFrame ist, es passt sich flexibel im responsiven Design an und bildet mit dem Inhalt der Website eine Einheit.

Die Nutzer sehen den Mehrwert des Tools, ohne Umwege und verpackt als ein Inhalt.

Mit einem dynamischen iFrame eingebundener Solarrechner

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://solarrechner.eturnity.io/muster_solar/static/iframe-resizer-client.js
    («muster_solar» mit ihrem Identifikator ersetzen)
  3. Integration des iFrames mit folgendem Code:
    <iframe id="iframe-eturnity" src="https://solarrechner.eturnity.io/muster_solar/?embedded=true&amp;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>
    

Dynamisches iFrame zur Einbindung von Tools ist nützlich

Sehen die Besucher der Website direkt einen Mehrwert, dann verlassen sie Ihre Website nicht. Egal von welchem Gerät aus Ihre Website aufgerufen wird, das Design passt sich dank iFrame Resizer an.

Wollen Sie also den Solarrechner auf den ersten Blick vorstellen und nutzbar machen, dann lohnt sich die Integrierung eines iFrames mit dynamischer Höhe durchaus. Mit der Anleitung ist die Einbindung des dynamischen iFrames ein zusätzliches und einfach umzusetzendes Gestaltungs- und Marketinginstrument.

Bild: © Pexels

bettina-enser-leitung-marketing-team-eturnity

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