Intégrer votre Calculateur Solaire ou de Chauffage sur votre site web grâce à l'iFrame dynamique
L'intégration d'iFrames (Inlineframe) est une solution simple utilisée pour afficher des contenus externes, comme le calculateur solaire ou le Calculateur de Chauffage Eturnity, sur un site web. L'ajout d'une hauteur dynamique à l'iFrame permet d'utiliser les contenus externes comme un instrument de conception et de marketing flexible et utile.
Pourquoi intégrer le calculateur solaire ou de chauffage avec un iFrame dynamique?
Si vous ne souhaitez pas nécessairement envoyer les utilisateurs de votre site web sur un autre domaine, mais que vous souhaitez tout de même leur présenter directement le Calculateur Solaire, l'utilisation d'un iFrame s'impose, ce qui permet d'intégrer le contenu directement dans votre propre site web (dans une sorte de cadre). Pour que cela soit bien vu, nous recommandons l'utilisation d'iFrames qui s'adaptent activement à l'évolution de la taille du contenu intégré - c'est-à-dire de manière dynamique.
Avantages et inconvénients de l'iFrame avec hauteur dynamique:
Grâce à l'iFrame dynamique basé sur Javascript, il est possible d'intégrer dans un site web des contenus dont la hauteur varie, sans espace ou espacement inesthétique. Si le contenu intégré, par exemple le Calculateur Solaire, a besoin d'une certaine hauteur, l'iFrame s'adapte automatiquement (iFrame-Resizer). Ceci est particulièrement important pour les sites web responsives.
Contrairement à l'iFrame classique, l'implémentation de l'iFrame avec hauteur dynamique est plus complexe: Javascript ainsi que quelques lignes de code doivent également être intégrés. Le code supplémentaire augmente également le temps de chargement du site web (pagespeed), mais de manière marginale.
Néanmoins, l'intégration du calculateur solaire ou de chauffage via un iFrame dynamique est judicieuse. Les utilisateurs peuvent utiliser l'outil immédiatement, sans devoir faire un détour par une autre page. Le Calculateur Solaire est perçu comme un élément régulier du site web et non comme un outil "externe".
La valeur ajoutée est directement visible et le taux de rebond peut être minimisé. Il convient de noter que cela ne fonctionne qu'avec des contenus spécialement programmés à cet effet. Si le contenu intégré n'est pas doté des fonctions correspondantes, l'iFrame dynamique ne fonctionne pas.
Remarque: Le cadre jaune n'est pas affiché. Pour cet exemple, il a été volontairement inséré afin de montrer dans quelle zone le Calculateur Solaire est intégré. Dans cet exemple, le Calculateur Solaire a été utilisé. Il en va de même pour le Calculateur Chauffage.
Comment intégrer un iFrame de manière dynamique?
Intégration de l'iFrame avec hauteur dynamique
Le Calculateur Solaire et le Calculateur Chauffage Eturnity sont dotés d'une programmation qui indique la taille optimale de l'iFrame (iFrame-Resizer). Ainsi, le Calculateur Solaire intégré au site web sous forme d'iFrame est toujours affiché de manière optimale. Pour l'utiliser, il faut suivre les étapes suivantes:
- S'assurer que le framework "jQuery" est disponible et chargé.
-
Chargement du script https://solarrechner.eturnity.io/muster_solar/static/iframe-resizer-client.js («muster_solar» à remplacer par son identifiant)
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' ); - Intégration de l'iFrame avec le code suivant:
<iframe id="iframe-eturnity" src="https://calculateursolaire.eturnity.io/example_energy_sas/?embedded=true&offsettop=120" frameborder="0"></iframe>
(La valeur de Offset devrait correspondre à la hauteur d'un éventuel Sticky Header, la valeur de Offset est optionnelle) - Démarrer le script avec le code suivant:
<script>
jQuery(document).ready(function(){
jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false });
});
(jQuery);
</script>
Vous utilisez WordPress comme système CMS?
Pour WordPress, il est préférable de charger le script via le fichier functions.php dans le modèle enfant. Pour cela, intégrez le code ci-dessous dans votre functions.php:
fonction 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
Proposer directement aux visiteurs de votre site Web l'utilisation d'un outil tel que le Calculateur Solaire et le calculateur de chauffage apporte une forte valeur ajoutée. L'intégration par le biais d'un iFrame avec une hauteur dynamique est particulièrement judicieuse dans ce cas, car le design s'adapte en fonction de l'appareil et le contenu du site web englobe visuellement le Calculateur Solaire et de Chauffage.
Nos instructions vous aideront à intégrer le calculateur solaire Eturnity sous forme d'iFrame dynamique. Vous disposez ainsi d'un outil de conception et de marketing supplémentaire sur votre site web.
Par ailleurs:
Vous pouvez également réaliser tous ces exemples avec le calculateur de chauffage : https://heating-calculator.eturnity.io/example_energy_sas/
