Qu'est-ce que l'intégration iFrame ?
L'intégration iFrame vous permet d'intégrer le calculateur solaire Eturnity directement dans votre site web, offrant une expérience fluide à vos visiteurs. Contrairement à la variante autonome où les utilisateurs sont redirigés vers une page séparée, l'intégration iFrame affiche le calculateur dans la mise en page de votre site web, conservant votre image de marque et le flux utilisateur.
Le calculateur solaire Eturnity inclut une technologie avancée iFrame Resizer qui ajuste automatiquement la hauteur de l'iframe en fonction du contenu du calculateur, garantissant un affichage optimal sur tous les appareils et scénarios.
Avantage clé : Avec l'intégration iframe, le logo et l'image de marque de votre site web restent visibles pendant que les utilisateurs interagissent avec le calculateur solaire, créant une expérience de marque plus cohérente par rapport à l'intégration autonome.
Méthodes d'intégration
Il existe deux approches pour l'intégration iframe :
iFrame statique simple : Implémentation de base avec des dimensions fixes
iFrame dynamique avec redimensionnement automatique : Implémentation avancée avec ajustement automatique de la hauteur
Implémentation iFrame statique simple
Pour une intégration de base, utilisez cette structure de code 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>
Important : Remplacez your_identifier par votre identifiant Eturnity réel fourni lors de la configuration de votre compte.
Les dimensions recommandées sont :
Hauteur : 700px minimum
Largeur : 100% pour un design responsive
iFrame dynamique avec redimensionnement automatique
Pour une expérience utilisateur optimale, implémentez l'iframe dynamique qui ajuste automatiquement sa hauteur en fonction du contenu du calculateur.
Étapes d'implémentation de l'iFrame dynamique
Prérequis
Le framework jQuery doit être chargé sur votre site web
Votre Identifiant du calculateur Eturnity : il s’agit de la dernière partie de l’URL fournie par Eturnity, par exemple
https://solarrechner.eturnity.io/your_identifier/: L'identifiant est ici "your_identifier"
Si vous ne connaissez pas votre identifiant ou avez un doute, n’hésitez pas à contacter notre support.Accès au développement web pour modifier le code de votre site web
Étape 1 : Charger le script iFrame Resizer
Ajoutez le script client iFrame Resizer à votre site web. Remplacez your_identifier par votre identifiant :
<script src="https://solarrechner.eturnity.io/your_identifier/static/iframe-resizer-client.js"></script>
Étape 2 : Ajouter l'iFrame à votre page
Insérez le code iframe à l'endroit où vous souhaitez que le calculateur apparaisse :
<iframe id="iframe-eturnity" src="https://solarrechner.eturnity.io/your_identifier/?embedded=true&offsettop=120" frameborder="0"> </iframe>
Étape 3 : Initialiser le redimensionneur dynamique
Ajoutez ce code JavaScript pour activer la fonctionnalité de redimensionnement automatique :
<script> jQuery(document).ready(function(){ jQuery("#iframe-eturnity").iFrameResize({ log: true, checkOrigin: false }); }); </script>
Étape 4 : Ajouter le script de redimensionnement final
Incluez ce script supplémentaire juste après l'implémentation de l'iframe :
<script> iFrameResize({ log: true, checkOrigin: false }, '#iframe-eturnity'); </script>
Implémentation spécifique à WordPress
Pour les sites web WordPress, utilisez cette approche pour charger correctement le script de redimensionnement :
Ajoutez ce code au fichier functions.php de votre thème :
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' );
N'oubliez pas : Remplacez your_identifier par votre identifiant Eturnity réel.
Paramètres d'URL et configuration
L'URL de l'iframe prend en charge plusieurs paramètres pour personnaliser le comportement du calculateur :
Paramètres requis
embedded=true- Active le mode iframe et supprime les éléments de navigation externes
Paramètres optionnels
lang- Définit la langue du calculateur (par ex.,lang=en,lang=de,lang=fr)offsettop- Ajuste pour les en-têtes fixes (la valeur doit correspondre à la hauteur de votre en-tête en pixels)cookies_popup- Contrôle l'affichage du consentement aux cookies (trueoufalse)
Exemple avec paramètres
https://solarrechner.eturnity.io/example_energy/?embedded=true&lang=fr&offsettop=120&cookies_popup=false
Pont de consentement de la page hôte (facultatif)
Si le calculateur est intégré à votre site web et que vous vous appuyez sur l'interface utilisateur de consentement intégrée à l'iFrame (c'est-à-dire que vous ne fournissez pas le consentement via les paramètres d'URL cookies_popup / cookies_accepted), chargez et initialisez le script du pont de consentement Eturnity afin que les données relatives au consentement puissent être stockées de votre côté (parent). Certains navigateurs et configurations bloquent ou isolent les cookies tiers ; pour ces cas, le pont utilise postMessage (et le stockage côté hôte) afin que le consentement puisse toujours fonctionner de manière fiable.
Pour implémenter le pont de consentement :
Assurez-vous que l'iFrame du calculateur a un
idunique sur la page (par exemple,id="iframe-eturnity").Incluez le script partout où vous chargez normalement les ressources de la page — par exemple dans
<head>ou avant</body>:
<script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>
3. Initialisez le pont uniquement après que le script a fini de se charger et que l'élément iFrame est déjà dans le DOM :
<script>
eturnityConsentBridge('iframe-eturnity', {
type: 'solar_calculator', // ou 'heating_calculator' ou 'e_mobility_configurator'
});
</script>Note : Remplacez iframe-eturnity par l'id réel de votre iFrame, et définissez type sur le produit qui correspond à l'iFrame. Pour le dépannage, vous pouvez ajouter logs: true à l'objet d'options.
L'API complète, le contrat de message et les cas particuliers sont disponibles dans la documentation eturnity-consent-bridge.md sur jsDelivr.
Résolution des problèmes courants
Le calculateur ne s'affiche pas
Vérifiez que votre identifiant est correct dans toutes les références d'URL
Assurez-vous que le paramètre
embedded=trueest inclusVérifiez que jQuery est chargé avant le script iframe resizer
La hauteur ne s'ajuste pas automatiquement
Confirmez que le script iframe resizer se charge depuis l'URL correcte
Vérifiez que l'ID de l'iframe correspond au sélecteur JavaScript
Vérifiez la console du navigateur pour les erreurs JavaScript
Problèmes de style
Ajustez le paramètre
offsettoppour tenir compte des en-têtes fixesAssurez-vous d'une largeur de conteneur suffisante (minimum 320px pour mobile)
Testez sur différents appareils et tailles d'écran
Meilleures pratiques
Optimisation des performances
Chargez le script iframe resizer de manière asynchrone quand c'est possible
Placez le code iframe après le contenu critique de la page
Considérez le chargement différé pour les placements sous la ligne de flottaison
Expérience utilisateur
Fournissez un contexte clair sur ce que fait le calculateur
Assurez-vous d'un espacement suffisant autour
Testez le flux utilisateur complet du calcul à la soumission de prospect
Pour des questions sur l'implémentation iframe ou pour demander votre identifiant de calculateur, contactez support@eturnity.com.