Comment intégrer une carte immobilière 3D Georivo dans Webflow

Pour intégrer une présentation interactive Georivo dans Webflow, commencez par publier le widget et autoriser le domaine exact de votre site web public dans Georivo. Copiez l'iframe HTTPS générée, ajoutez-la via l'élément HTML ou de code pris en charge par la plateforme, préservez son ratio d'aspect et publiez la page. Vérifiez l'URL publique en direct sur ordinateur et mobile, notamment l'accès au domaine, le chargement, l'attribution, le comportement de consentement et la gestion des solutions de repli.

Prérequis pour l'intégration dans Webflow

L'intégration d'une présentation 3D interactive dans un site Webflow nécessite une préparation minutieuse sur les deux plateformes. Avant de tenter d'intégrer un code, vous devez vous assurer que vous remplissez tous les prérequis techniques et administratifs. Tout d'abord, vous devez disposer d'un widget Georivo entièrement configuré et publié. Ce widget représente votre vitrine immobilière, votre présentation de quartier ou votre guide d'arrivée, avec des mouvements de caméra programmés et des emplacements marqués. Les brouillons non enregistrés ou les configurations non publiées ne s'afficheront pas correctement dans les environnements de production.

Deuxièmement, vous devez disposer d'un accès éditeur au projet Webflow ciblé. L'intégration repose sur les fonctionnalités de code personnalisé de Webflow, qui sont limitées en fonction de la structure de votre compte. Plus précisément, vous devez disposer d'un forfait Webflow qui autorise les intégrations d'iframes ou de codes HTML personnalisés. Si votre site utilise une offre gratuite Starter sans abonnement de site actif ou mise à niveau de l'espace de travail, l'élément ne sera pas disponible. Enfin, vous devez identifier le nom de domaine public exact sur lequel votre site sera hébergé. Georivo utilise des intégrations liées au domaine comme fonctionnalité de sécurité essentielle pour protéger l'imagerie géospatiale sous licence contre les liens directs non autorisés et l'utilisation sur des sites externes.

Copier le code d'intégration Georivo

Une fois votre présentation 3D finalisée et publiée dans le tableau de bord Georivo, vous pouvez récupérer le code d'intégration sécurisé. Accédez aux paramètres de partage ou de distribution de votre widget spécifique. Vous y trouverez la configuration de l'autorisation de domaine. Vous devez saisir le domaine public exact de votre site Webflow, y compris les sous-domaines de préproduction que vous prévoyez d'utiliser pour les tests avant le lancement public officiel. Cette étape d'autorisation est une exigence stricte ; le protocole de sécurité du widget bloquera l'affichage sur tout domaine qui n'est pas explicitement répertorié.

Après avoir enregistré vos domaines autorisés, copiez le fragment de code de l'iframe HTTPS généré. Conformément aux conditions strictes d'intégration, vous devez utiliser uniquement le code d'iframe exact copié depuis le tableau de bord de votre widget Georivo publié. Ne tentez jamais d'exposer, de modifier ou de recréer manuellement l'URL protégée ou les jetons de sécurité uniques intégrés dans la chaîne source. Modifier ces paramètres invalidera le protocole de sécurité, ce qui entraînera un échec de chargement ou des erreurs d'autorisation lorsque l'iframe tentera de se connecter aux serveurs d'affichage.

Ajouter l'élément Code Embed dans Webflow

Une fois le code de l'iframe HTTPS sécurisé copié dans votre presse-papiers, ouvrez votre Webflow Designer et accédez à la page et à la section spécifiques où vous souhaitez que la carte 3D interactive apparaisse. Dans l'interface Webflow, localisez le panneau de sélection des éléments. Faites défiler les composants disponibles pour trouver l'élément Code Embed, généralement regroupé sous les composants avancés ou personnalisés. Glissez cet élément et placez-le dans votre conteneur de mise en page, section ou bloc div cible.

Dès que vous placez l'élément, Webflow ouvre son interface d'éditeur de code personnalisé. Collez le code de l'iframe Georivo copié directement dans cette fenêtre d'édition. Assurez-vous qu'aucun espace supplémentaire, caractère ou balise rompue n'a été introduit lors du collage. Une fois collé, enregistrez et fermez l'éditeur. Notez que Webflow limitant l'exécution du code personnalisé dans l'espace de conception pour des raisons de sécurité et de stabilité, vous verrez un encadré de remplacement plutôt que la carte 3D interactive en direct. L'affichage réel n'aura lieu que sur les domaines de préproduction ou de production publiés.

Règles de dimensionnement réactif et de ratio d'aspect

Pour garantir que votre présentation 3D s'affiche parfaitement sur toutes les tailles d'écran, vous devez établir des règles de style réactif claires dans Webflow. L'iframe elle-même est conçue pour s'étendre afin de remplir son conteneur parent, ce qui signifie que sa largeur et sa hauteur doivent être définies sur 100% dans le fragment de code personnalisé. Cette stratégie de mise en page délègue l'ensemble du dimensionnement, de la mise à l'échelle et des limites réactives au panneau de style natif de Webflow, vous permettant de gérer la mise en page de manière visuelle.

Créez un bloc div parent dédié dans Webflow pour accueillir l'élément Code Embed. Définissez le positionnement de ce div parent sur "relative". Pour préserver un ratio d'aspect cohérent, vous pouvez utiliser des techniques de marge intérieure inférieure (padding-bottom) basées sur des pourcentages ou appliquer des contraintes de hauteur explicites. Sur les points de rupture mobiles, il est essentiel de veiller à ce que le conteneur parent maintienne une hauteur minimale, comme 400 pixels, pour éviter que la carte 3D ne s'affaisse ou ne soit tronquée. Cette hauteur adéquate garantit également que les utilisateurs mobiles peuvent interagir confortablement avec les commandes tactiles de la carte sans faire défiler accidentellement la page principale.

Publication du domaine et étapes de vérification

Une fois votre mise en page configurée et le code personnalisé enregistré, l'étape suivante consiste à publier votre projet Webflow pour rendre l'intégration opérationnelle. Cliquez sur les commandes de publication dans l'interface Webflow et sélectionnez les domaines autorisés, y compris votre sous-domaine de préproduction et votre domaine de production personnalisé principal. Lancez le processus de publication et attendez que Webflow confirme que les modifications sont en ligne.

Une fois publié, accédez à l'URL publique en direct dans un navigateur web pour vérifier l'intégration. Vous devez tester la page sur ordinateur et sur appareil mobile. Durant cette phase de vérification, assurez-vous du bon accès au domaine et de la vitesse de chargement. Confirmez que l'attribution requise de Google Maps Platform est visible et correctement positionnée, respectant le contexte d'utilisation autorisé pour l'imagerie en direct. De plus, observez le comportement lié au consentement et la manière dont le widget gère les solutions de repli si un utilisateur a restreint certains scripts ou si la connexion est lente.

Distinguer la visualisation 3D des images de drone

Une directive essentielle pour les professionnels de l'immobilier, les promoteurs et les spécialistes du marketing utilisant Georivo est la distinction claire entre la visualisation 3D générée par ordinateur et les prises de vues réelles par drone. Georivo crée des présentations de lieux 3D photoréalistes et interactives en traitant les adresses des propriétés et les lieux environnants à l'aide d'imagerie géospatiale sous licence. La plateforme n'héberge ni ne diffuse de vidéos physiques brutes de drone ou de fichiers vidéo statiques.

Lorsque vous présentez ces cartes interactives à des acheteurs potentiels ou à des clients, vos descriptions d'annonces et vos supports marketing doivent indiquer clairement qu'il s'agit d'une visualisation 3D et non d'images de drone filmées en direct. Cette transparence garantit une conformité totale avec les normes publicitaires du secteur et évite toute fausse déclaration sur l'état actuel de la propriété physique. Elle permet également de gérer les attentes des clients en soulignant que l'outil est un guide spatial interactif conçu pour l'exploration du quartier plutôt qu'un enregistrement physique en temps réel.

Résolution des erreurs d'intégration courantes

Si votre carte 3D intégrée ne s'affiche pas correctement, plusieurs problèmes courants peuvent être diagnostiqués et résolus. Une iframe vide ou une erreur de blocage de domaine indique généralement une non-correspondance entre l'URL du site en direct et la liste des domaines autorisés dans votre tableau de bord Georivo. Vérifiez que le domaine exact, y compris les sous-domaines de préproduction ou les préfixes spécifiques, est correctement saisi dans vos paramètres Georivo. Même une légère différence d'orthographe déclenchera le blocage de sécurité.

D'autres problèmes courants incluent un mauvais affichage de la hauteur et un recadrage sur mobile. Si l'iframe s'affaisse pour atteindre une hauteur de zéro, vérifiez que votre conteneur parent Webflow possède une hauteur explicite ou un positionnement relatif avec des dimensions définies. De plus, assurez-vous que les politiques de sécurité du contenu (CSP) ou les blocages de contenu mixte de votre hébergeur n'interfèrent pas avec la connexion HTTPS sécurisée requise par Georivo. Enfin, vérifiez que des caches de navigateur obsolètes ou des outils de gestion du consentement ne bloquent pas l'initialisation des scripts de la carte interactive.

Meilleures pratiques de performance et d'optimisation

Pour maintenir des performances de site optimales et des vitesses de chargement rapides sur votre site Webflow, vous devez suivre les meilleures pratiques d'intégration de médias interactifs tiers. Étant donné que les cartes 3D photoréalistes de Georivo affichent de l'imagerie géospatiale haute résolution, leur chargement immédiat lors de l'initialisation de la page peut affecter les signaux web essentiels (Core Web Vitals) de votre site et vos scores de chargement initiaux. Envisagez de placer le conteneur de la carte plus bas sur la page afin qu'il ne fasse pas partie du contenu crucial au-dessus de la ligne de flottaison.

De plus, vous pouvez tirer parti de l'optimisation native des navigateurs en appliquant des attributs de chargement différé (lazy loading) à l'élément iframe. Cela indique au navigateur de différer le chargement des ressources 3D interactives jusqu'à ce que le visiteur fasse défiler la page à proximité du conteneur de la carte, préservant ainsi la bande passante initiale et les cycles CPU pour votre contenu Webflow principal. Cette approche garantit que votre site web reste rapide et réactif tout en offrant une présentation de lieu riche et interactive lorsque l'utilisateur est prêt à explorer le contexte du quartier environnant.

Limites et adéquation

Utilisez ce matériel pour la présentation et l'aide à la décision, et non comme un substitut à des informations sources vérifiées de manière indépendante. Confirmez les itinéraires, les distances, les accès, la disponibilité, l'imagerie, les limites juridiques, les exigences de la plateforme et les conditions actuelles auprès de la source faisant autorité compétente avant toute publication ou utilisation.

Flux de travail étape par étape pour l'intégration dans Webflow

1. Configurez et publiez votre présentation de lieu 3D interactive dans le tableau de bord Georivo.
2. Ajoutez vos domaines exacts de préproduction et de production Webflow à la liste des domaines autorisés dans Georivo.
3. Copiez le code d'intégration de l'iframe HTTPS sécurisé généré par la plateforme Georivo.
4. Ouvrez Webflow Designer, accédez à votre page cible et glissez un élément Code Embed dans votre mise en page.
5. Collez le code de l'iframe copié dans l'éditeur de code personnalisé et enregistrez l'élément.
6. Définissez le style du conteneur parent sur un positionnement relatif avec une hauteur ou un ratio d'aspect défini.
7. Publiez votre projet Webflow sur les domaines de préproduction ou de production autorisés.
8. Testez l'URL en direct sur plusieurs appareils pour vérifier les commandes interactives et l'affichage de l'imagerie géospatiale.

La visualisation 3D interactive offre une alternative évolutive et conforme aux prises de vues physiques par drone, permettant aux professionnels de l'immobilier de présenter le contexte d'une propriété sans retards météorologiques ni restrictions d'espace aérien.