Vai al contenuto principale

Come integrare il calcolatore solare Eturnity come iFrame

Integra il calcolatore solare Eturnity nel tuo sito web con la tecnologia iframe dinamica, incluso ridimensionamento e parametri.

Cos'è l'integrazione iFrame?

L'integrazione iFrame permette di incorporare il calcolatore solare Eturnity direttamente nel tuo sito web, fornendo un'esperienza fluida ai vostri visitatori. A differenza della variante autonoma dove gli utenti vengono reindirizzati a una pagina separata, l'integrazione iFrame visualizza il calcolatore all'interno del layout del tuo sito web, mantenendo il branding e il flusso utente.

Il calcolatore solare Eturnity include una tecnologia avanzata iFrame Resizer che regola automaticamente l'altezza dell'iframe in base al contenuto del calcolatore, garantendo una visualizzazione ottimale su tutti i dispositivi e scenari.

Vantaggio chiave: Con l'integrazione iframe, il logo e il branding del tuo sito web rimangono visibili mentre gli utenti interagiscono con il calcolatore solare, creando un'esperienza di marca più coerente rispetto all'integrazione autonoma.

Metodi di integrazione

Esistono due approcci per l'integrazione iframe:

  • iFrame statico semplice: Implementazione di base con dimensioni fisse

  • iFrame dinamico con auto-ridimensionamento: Implementazione avanzata con regolazione automatica dell'altezza

Implementazione iFrame statico semplice

Per l'integrazione di base, utilizzate questa struttura di codice HTML:

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

Importante: Sostituisci your_identifier con il tuo identificatore Eturnity reale fornito durante la configurazione del tuo account.

Le dimensioni consigliate sono:

  • Altezza: 700px minimo

  • Larghezza: 100% per design responsive

iFrame dinamico con auto-ridimensionamento

Per un'esperienza utente ottimale, implementate l'iframe dinamico che regola automaticamente la sua altezza in base al contenuto del calcolatore.

Passi di implementazione dell'iFrame dinamico

Prerequisiti

  • Il framework jQuery deve essere caricato sul tuo sito web

  • Il tuo identificatore del calcolatore Eturnity

  • Accesso allo sviluppo web per modificare il codice del tuo sito web

Passo 1: Caricare lo script iFrame Resizer

Aggiungi lo script client iFrame Resizer al tuo sito web. Sostituisci your_identifier con il tuo identificatore:

<script src="https://solarrechner.eturnity.io/your_identifier/static/iframe-resizer-client.js"></script>

Passo 2: Aggiungere l'iFrame alla vostra pagina

Inserisci il codice iframe dove volete che appaia il calcolatore:

<iframe id="iframe-eturnity" src="https://solarrechner.eturnity.io/your_identifier/?embedded=true&offsettop=120" frameborder="0"> </iframe>

Passo 3: Inizializzare il ridimensionatore dinamico

Aggiungi questo codice JavaScript per attivare la funzionalità di auto-ridimensionamento:

<script> jQuery(document).ready(function(){ jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false }); }); </script>

Passo 4: Aggiungere lo script finale del ridimensionatore

Includi questo script aggiuntivo subito dopo l'implementazione dell'iframe:

<script> iFrameResize({ log: true, checkOrigin: false }, '#iframe-eturnity'); </script>

Implementazione specifica per WordPress

Per i siti web WordPress, utilizza questo approccio per caricare correttamente lo script del ridimensionatore:

Aggiungi questo codice al file functions.php del tuo tema:

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' );

Ricorda: Sostituisci your_identifier con il tuo identificatore Eturnity.

Parametri URL e configurazione

L'URL dell'iframe supporta diversi parametri per personalizzare il comportamento del calcolatore:

Parametri richiesti

  • embedded=true - Abilita la modalità iframe e rimuove gli elementi di navigazione esterni

Parametri opzionali

  • lang - Imposta la lingua del calcolatore (es., lang=en, lang=de, lang=it)

  • offsettop - Regola per intestazioni fisse (il valore dovrebbe corrispondere all'altezza della vostra intestazione in pixel)

  • cookies_popup - Controlla la visualizzazione del consenso ai cookie (true o false)

Esempio con parametri

https://solarrechner.eturnity.io/example_energy/?embedded=true&lang=it&offsettop=120&cookies_popup=false

Bridge di consenso della pagina ospitante (opzionale)

Se il calcolatore è incorporato nel tuo sito web e ti affidi all'interfaccia utente di consenso integrata all'interno dell'iFrame (cioè non fornisci il consenso tramite i parametri URL cookies_popup / cookies_accepted), carica e inizializza lo script del bridge di consenso Eturnity in modo che i dati relativi al consenso possano essere memorizzati sul tuo lato (parent). Alcuni browser e configurazioni bloccano o isolano i cookie di terze parti; per questi casi, il bridge utilizza postMessage (e la memorizzazione lato host) in modo che il consenso possa ancora funzionare in modo affidabile.

Per implementare il bridge di consenso:

  1. Assicurati che l'iFrame del calcolatore abbia un id unico sulla pagina (ad esempio, id="iframe-eturnity").

  2. Includi lo script ovunque carichi normalmente le risorse della pagina — ad esempio in <head> o prima di </body>:
    ​<script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>

3. Inizializza il bridge solo dopo che lo script ha finito di caricarsi e l'elemento iFrame è già nel DOM:

<script>
  eturnityConsentBridge('iframe-eturnity', {
    type: 'solar_calculator', // o 'heating_calculator' o 'e_mobility_configurator'
  });
</script>

Nota: Sostituisci iframe-eturnity con l'id reale del tuo iFrame e imposta type sul prodotto che corrisponde all'iFrame. Per la risoluzione dei problemi, puoi aggiungere logs: true all'oggetto delle opzioni.

L'API completa, il contratto di messaggio e i casi limite sono disponibili nella documentazione eturnity-consent-bridge.md su jsDelivr.

Risoluzione dei problemi comuni

Il calcolatore non si visualizza

  • Verifica che il tuo identificatore sia corretto in tutti i riferimenti URL

  • Assicurati che il parametro embedded=true sia incluso

  • Controlla che jQuery sia caricato prima dello script iframe resizer

L'altezza non si regola automaticamente

  • Conferma che lo script iframe resizer si carichi dall'URL corretto

  • Verifica che l'ID dell'iframe corrisponda al selettore JavaScript

  • Controlla la console del browser per errori JavaScript

Problemi di stile

  • Regola il parametro offsettop per tenere conto delle intestazioni fisse

  • Assicurati di una larghezza del contenitore sufficiente (minimo 320px per mobile)

  • Testa su diversi dispositivi e dimensioni dello schermo

Migliori pratiche

Ottimizzazione delle prestazioni

  • Carica lo script iframe resizer in modo asincrono quando possibile

  • Posiziona il codice iframe dopo il contenuto critico della pagina

  • Considera il caricamento lazy per posizionamenti sotto la piega

Esperienza utente

  • Fornisci un contesto chiaro su cosa fa il calcolatore

  • Assicurati di uno spazio bianco circostante adeguato

  • Testa il flusso utente completo dal calcolo alla sottomissione del lead

Per domande sull'implementazione iframe o per richiedere il tuo identificatore del calcolatore, contatta support@eturnity.com.

Articoli correlati
Hai ricevuto la risposta alla tua domanda?