Dynamic iFrame makes it possible: Flexible integration of the Solar or Heating Calculator
The integration of iFrames (inline frames) is uncomplicated and therefore still a popular solution to display external content, such as the solar calculator or heating calculator, on a website. By adding a dynamic height to the iFrame, external content can be used even better as a useful flexible design and marketing tool.
Why include the solar or heating calculator with a dynamic iFrame?
If you don't necessarily want to send the users of your website to another domain and still want to present the solar calculator to them directly, then the use of an iFrame is a good idea, whereby the content is integrated directly into your own website (in a kind of frame). To make this look good, we recommend using iFrames, which actively adapt to the changing size of the embedded content – dynamically.
Advantages and disadvantages of the iFrame with dynamic height:
The dynamic Javascript-based iFrame allows content with changing height to be integrated into a website without unpleasant placeholders or spacing. If the integrated content, e.g. the solar calculator, requires a certain height, the iFrame adjusts automatically (iFrame Resizer). This is especially important for responsive websites.
In contrast to the classic iFrame, the implementation of the iFrame with dynamic height is a bit more complex. The reason: The Javascript and a few lines of code must also be included. The additional code also increases the loading time of the website (pagespeed), but only marginally.
Nevertheless, the integration of the solar or heating calculator via a dynamic iFrame makes sense. Users can use the tool immediately without having to take a detour to another site. The solar calculator is perceived as a regular part of the website and not as an "external" tool.
The added value is directly visible and the bounce rate can be minimized. It should be noted that this only works with specially programmed content. If the included content is not also equipped with the appropriate features, a dynamic iFrame will not work.
Note: The yellow frame is generally not displayed. For this example, it was deliberately inserted to show in which area the solar calculator is integrated. In this example, the solar calculator was used. The same applies to the heating calculator.
How to embed an iFrame dynamically?
Integration of the iFrame with dynamic height
In the Eturnity solar calculator and heating calculator a programming is implemented, which reports the optimal size of the iFrame in each case (iFrame Resizer). This ensures that the solar calculator, which is integrated into the website as an iFrame, is always displayed optimally. To use it, the following steps must be performed:
- Ensure that the framework "jQuery" is present and loaded
-
Loading the script https://solarrechner.eturnity.io/muster_solar/static/iframe-resizer-client.js (replace "muster_solar" with your identifier)
function iFrame_Resizer() { wp_register_script( 'iFrameResizer', 'https://solarrechner.eturnity.io/muster_solar/static/iframe-resizer-client.js', array(), '', true ); wp_enqueue_script( 'iFrameResizer' ); }add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' ); - Integration of the iFrame with the following code:
<iframe id="iframe-eturnity" src="https://solarcalculator.eturnity.io/example_energy_ltd/?embedded=true&offsettop=120" frameborder="0"></iframe>
(The value of Offset should correspond to the height of any existing sticky header, the offset value is optional). - Start the script with the following code:
<script>
jQuery(document).ready(function(){
jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false });
});
(jQuery);
</script>
You use WordPress as CMS system?
For WordPress, the best way to load the script is via functions.php in the child template. To do this, integrate the code below into your functions.php:
function iFrame_Resizer() {
wp_register_script( 'iFrameResizer', 'https://solarrechner.eturnity.io/muster_solar/static/iframe-resizer-client.js', array(), '', true );
wp_enqueue_script( 'iFrameResizer' );
}
add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' );
Conclusion
Offering visitors to your website the use of a tool such as the solar calculator and heating calculator directly provides a strong added value. The integration via an iFrame with dynamic height is particularly useful in this case, as it adapts in design depending on the device and the website content visually flows around the solar and heating calculator.
Our instructions are intended to help you integrate the Eturnity solar calculator as a dynamic iFrame. In the end, you have implemented an additional design and marketing tool on your website.
By the way:
You can also implement all these examples with the Heating Calculator: https://heizungsrechner.eturnity.io/example_energy_ltd/
