L'iFrame dinamico rende possibile: l'integrazione flessibile del Calcolatore Solare o del Calcolatore Termico
L'incorporamento di iFrames (Inlineframe) è semplice e per questo motivo rimane una soluzione molto utilizzata per mostrare contenuti esterni, come il Calcolatore Solare o il Calcolatore Termico, su un sito web. Estendendo l'iFrame con un'altezza dinamica, i contenuti esterni possono essere utilizzati ancora meglio come uno strumento di marketing molto efficace.
Perché incorporare il Calcolatore Solare o il Calcolatore Termico con un iFrame dinamico?
Se non vuoi necessariamente reindirizzare gli utenti del tuo sito web su un'altra domain, ma desideri comunque presentare direttamente il Calcolatore Solare, l'uso di un iFrame, che incorpora il contenuto direttamente nel tuo sito web (come in una cornice), è una soluzione ottimale. Per garantire che ciò sia anche visivamente accattivante, raccomandiamo l'uso di iFrames che si adattano attivamente e dinamicamente alle dimensioni variabili del contenuto incorporato.
Vantaggi e svantaggi dell'iFrame con altezza dinamica:
Grazie all'iFrame dinamico basato su Javascript, i contenuti con altezze variabili possono essere integrati in un sito web senza antiestetici segnaposto o spazi. Se il contenuto incorporato, come il Calcolatore Solare, necessita di una certa altezza, l'iFrame si adatta automaticamente (iFrame-Resizer), il che è particolarmente importante per i siti web responsivi.
Contrariamente all'iFrame classico, l'implementazione dell'iFrame dinamico è leggermente più complicato. La ragione è che anche il Javascript e alcune righe di codice devono essere incorporati. Questo codice aggiuntivo aumenta leggermente il tempo di caricamento della pagina web (PageSpeed), ma solo in modo marginale.
Tuttavia, l'incorporamento del Calcolatore Solare o del Calcolatore Termico tramite un iFrame dinamico è consigliato. Gli utenti possono utilizzare lo strumento immediatamente, senza dover navigare su un'altra pagina. Il Calcolatore Solare è percepito come parte integrante del sito web e non come uno strumento "esterno".
Il valore aggiunto è immediatamente visibile e il tasso di abbandono sarà ridotto. È importante notare che ciò funziona solo con contenuti appositamente programmati. Se il contenuto incorporato non è dotato delle funzioni appropriate, un iFrame dinamico non funzionerà.
Nota: il bordo giallo generalmente non viene mostrato. In questo esempio, è stato intenzionalmente inserito per indicare l'area in cui il Calcolatore Solare è stato incorporato. Questo esempio utilizza il Calcolatore Solare. Lo stesso vale per il Calcolatore Termico.
Come si incorpora un iFrame dinamicamente?
Integrazione dell'iFrame con altezza dinamica
Nel Calcolatore Solare e nel Calcolatore Termico Eturnity è implementata una programmazione che segnala la dimensione ottimale dell'iFrame (iFrame-Resizer). In questo modo, il Calcolatore Solare, incorporato come iFrame nel sito web, viene sempre visualizzato in modo ottimale. Per utilizzarlo, seguire questi passaggi:
- Assicurarsi che il framework "jQuery" sia presente e caricato
-
Caricare lo script https://calcolatoresolare.eturnity.io/example_energy_srl/static/iframe-resizer-client.js (sostituire "example_energy_srl" con il proprio identificatore)
function iFrame_Resizer() { wp_register_script( 'iFrameResizer', 'https://calcolatoresolare.eturnity.io/example_energy_srl/static/iframe-resizer-client.js', array(), '', true ); wp_enqueue_script( 'iFrameResizer' ); }add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' ); - Integrare l'iFrame con il seguente codice:
<iframe id="iframe-eturnity" src="https://calcolatoresolare.eturnity.io/example_energy_srl/?embedded=true&offsettop=120" frameborder="0"></iframe>
(Il valore dell'offset dovrebbe corrispondere all'altezza di un eventuale sticky header presente; il valore dell'offset è opzionale) - Avviare lo script con il seguente codice:
<script>
jQuery(document).ready(function(){
jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false });
});
(jQuery);
</script>
Utilizzate WordPress come sistema CMS?
Con WordPress, è consigliabile caricare lo script tramite il file functions.php nel Child-Theme. Per fare ciò, integrate il seguente codice nel vostro functions.php:
function iFrame_Resizer() {
wp_register_script( 'iFrameResizer', 'https://calcolatoresolare.eturnity.io/example_energy_srl/static/iframe-resizer-client.js', array(), '', true );
wp_enqueue_script( 'iFrameResizer' );
}
add_action( 'wp_enqueue_scripts', 'iFrame_Resizer' );
Conclusione
Offrire direttamente ai visitatori del vostro sito web l'utilizzo di strumenti come il Calcolatore Solare e il Calcolatore Termico apporta un significativo valore aggiunto. L'incorporamento tramite un iFrame con altezza dinamica è particolarmente vantaggioso in questo caso, poiché si adatta al design a seconda del dispositivo, facendo sì che il contenuto del sito web avvolga visivamente sia il Calcolatore Solare sia il Calcolatore Termico.
La nostra guida è pensata per aiutarvi nell'incorporare il Calcolatore Solare Eturnity come un iFrame dinamico. In questo modo, avrete implementato un ulteriore strumento di design e marketing sul vostro sito web.
A proposito:
Potete applicare tutti questi esempi anche con il Calcolatore Termico: https://calcolatoretermico.eturnity.io/example_energy_srl/
