Comment intégrer une carte 3D Georivo dans WordPress
Intégrez un widget Georivo publié dans WordPress à l'aide du bloc HTML personnalisé, d'un conteneur adaptatif, de l'autorisation de domaine et de la vérification de la page publique.
Pour intégrer une présentation de localisation Georivo dans WordPress, commencez par publier le widget et autoriser le domaine exact de votre site web public dans Georivo. Copiez l'iframe HTTPS généré, ajoutez-le via l'élément HTML ou de code pris en charge par la plateforme, préservez son format d'affichage 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 du mode de secours.
Prérequis
Avant d'intégrer des présentations de localisation 3D interactives sur votre site WordPress, vous devez vous assurer que plusieurs prérequis techniques et administratifs sont remplis. Tout d'abord, un widget Georivo publié doit être prêt dans votre tableau de bord actif. Ce widget est configuré à l'aide d'une adresse de propriété spécifique et de points d'intérêt à proximité, que le système Georivo convertit en une présentation de localisation 3D interactive et photoréaliste intégrable. Cette présentation utilise des images géospatiales sous licence pour afficher le contexte environnant de la propriété. Étant donné que le widget doit être publié avant de générer le code d'intégration, vérifiez que tous les mouvements de caméra programmés, les flux (tels que la présentation de la propriété, l'histoire du quartier ou le guide d'arrivée) et les emplacements à proximité sont finalisés.
Deuxièmement, vous devez disposer d'un accès de niveau éditeur ou administrateur au site WordPress cible. La plateforme WordPress applique des politiques de sécurité strictes concernant l'exécution de scripts personnalisés et de code HTML brut. Plus précisément, la possibilité d'insérer du code HTML non filtré ou des éléments iframe est soumise à des restrictions de rôle d'utilisateur. Si votre compte ne dispose pas de ces privilèges, l'éditeur WordPress peut supprimer les balises iframe lors de l'enregistrement ou de la publication de la page. De plus, assurez-vous que votre offre WordPress active et votre environnement d'hébergement permettent l'utilisation de code personnalisé ou d'intégrations d'iframe externes, car certains abonnements de base ou extensions de sécurité restreignent l'exécution de scripts externes.
Troisièmement, votre compte Georivo doit avoir autorisé le domaine public exact de votre site WordPress. Georivo utilise des intégrations liées au domaine pour protéger vos images géospatiales sous licence et empêcher des tiers non autorisés de créer des liens directs vers vos ressources interactives. Enfin, il est essentiel de distinguer clairement cette visualisation 3D d'une véritable vidéo par drone. La plateforme Georivo génère une présentation de localisation interactive à l'aide d'images géospatiales 3D photoréalistes sous licence. Il ne s'agit pas d'une vidéo par drone physique en temps réel, et cela ne représente pas les conditions physiques immédiates, la météo actuelle ou les détails de chantiers de construction actifs. Les utilisateurs doivent comprendre qu'il s'agit d'un outil de visualisation conçu pour communiquer les relations spatiales et la topographie régionale plutôt que d'une capture physique en direct.
Copier le code d'intégration Georivo
Une fois les prérequis remplis, vous pouvez récupérer le code d'intégration correct sur la plateforme Georivo. Connectez-vous à votre tableau de bord, sélectionnez le projet correspondant à votre propriété et accédez aux paramètres de publication ou de partage. Vous y trouverez le code d'iframe HTTPS généré, spécialement conçu pour votre widget. Ce code est lié au jeton unique de votre projet et est structuré pour charger l'environnement 3D interactif en toute sécurité.
Conformément au contrat d'intégration, vous devez utiliser uniquement le code d'iframe exact copié directement depuis le widget Georivo publié. Ne divulguez, ne modifiez et n'inventez jamais son URL protégée ou son jeton de sécurité. Tenter de modifier manuellement l'URL source ou de supprimer des paramètres requis peut rompre la connexion avec le moteur de rendu ou déclencher des blocages de sécurité liés au domaine.
Copiez l'intégralité du bloc de code dans votre presse-papiers. Pour éviter les erreurs de formatage, évitez de coller le code dans des éditeurs de texte enrichi ou des traitements de texte avant de le transférer vers WordPress. Ces programmes peuvent introduire des caractères de mise en forme masqués ou convertir les guillemets droits standard en guillemets courbes, ce qui corromprait la syntaxe HTML. Conservez le code dans votre presse-papiers ou collez-le dans un éditeur de texte brut si un stockage temporaire est nécessaire.
Ajouter un bloc HTML personnalisé
WordPress utilise un éditeur par blocs (Gutenberg) pour organiser et afficher le contenu des pages. Pour insérer votre carte 3D interactive, ouvrez la page ou l'article cible dans l'éditeur et localisez la section où vous souhaitez que la visualisation apparaisse. Ajoutez un nouveau bloc en cliquant sur l'icône plus et recherchez le bloc HTML personnalisé. Ce bloc est spécialement conçu pour accepter du code HTML brut et des codes d'iframe sans analyser ni échapper les balises.
Évitez d'utiliser des blocs de paragraphe standard, des blocs de texte ou des blocs d'intégration multimédia par défaut pour cette intégration. Les blocs de texte standard afficheront le code brut sous forme de texte littéral sur votre site en direct, tandis que les blocs d'intégration par défaut sont optimisés pour des fournisseurs oEmbed spécifiques et ne prennent pas en charge les iframes sécurisées liées au domaine utilisées par Georivo. Le bloc HTML personnalisé offre l'environnement le plus propre et le plus fiable pour les intégrations d'iframes personnalisées.
Collez le code d'iframe Georivo copié directement dans la zone de texte du bloc HTML personnalisé. Vous pouvez utiliser le bouton Aperçu dans la barre d'outils du bloc pour vérifier si la carte 3D s'initialise correctement dans l'interface de l'éditeur. Si la zone d'aperçu reste vide ou affiche une erreur, vérifiez que l'intégralité du code de l'iframe a été collée sans balises manquantes ni attributs tronqués, et confirmez que votre rôle d'utilisateur dispose des autorisations requises pour enregistrer du code HTML non filtré.
Dimensionnement adaptatif
Les acheteurs immobiliers et les clients consultent les annonces sur une grande variété d'appareils, notamment des téléphones portables, des tablettes et des écrans d'ordinateur haute résolution. Pour offrir une expérience utilisateur professionnelle, votre carte 3D intégrée doit s'adapter de manière fluide à toutes les tailles d'écran. Les iframes standard se chargent souvent avec des dimensions fixes en pixels, ce qui peut provoquer un débordement de la carte sur les petits écrans ou la faire apparaître comme une petite boîte sur les grands écrans.
Pour garantir que la carte reste entièrement adaptative, vous devez préserver son format d'affichage. Cela peut être accompli en enveloppant l'iframe copiée dans un conteneur CSS adaptatif. Dans le bloc HTML personnalisé, enveloppez l'iframe dans un élément div avec un nom de classe personnalisé, et définissez les styles adaptatifs dans l'outil de personnalisation de votre thème WordPress ou dans votre feuille de style globale. Vous pouvez également définir l'attribut de largeur de l'iframe à 100 pour cent et définir une hauteur relative ou basée sur la taille de l'écran.
Cette approche permet à la carte 3D interactive de s'étendre sur toute la largeur de son conteneur parent tout en conservant une hauteur verticale appropriée pour l'exploration tactile. Testez toujours le comportement de la mise en page en redimensionnant la fenêtre de votre navigateur ou en utilisant les modes d'aperçu sur différents appareils de l'éditeur pour vous assurer que la visualisation s'adapte de manière fluide sans recadrer les éléments d'interface essentiels.
Publier et vérifier
Après avoir inséré le code de l'iframe et ajusté son style adaptatif, cliquez sur le bouton Publier ou Mettre à jour dans le coin supérieur droit de l'éditeur WordPress pour mettre les modifications en ligne. Une fois la page publiée, accédez à l'URL publique en direct à l'aide d'une fenêtre de navigation privée. Cela vous assure de visualiser la page comme un visiteur standard, sans sessions d'administrateur en cache qui pourraient contourner les règles de sécurité ou de chargement.
Effectuez une vérification approfondie de la page en direct sur ordinateur et sur appareil mobile. Tout d'abord, vérifiez l'accès au domaine pour vous assurer que la carte se charge sans blocage de sécurité lié au domaine ni erreur d'autorisation. Deuxièmement, vérifiez l'état de chargement pour confirmer que la carte 3D s'initialise complètement et que tous les mouvements de caméra programmés commencent à s'exécuter comme prévu. Troisièmement, vérifiez que l'attribution requise pour les images géospatiales sous licence est clairement visible et conforme aux conditions d'utilisation nécessaires.
De plus, testez le comportement de consentement pour vous assurer que l'intégration respecte les outils de consentement aux cookies ou les bannières de confidentialité de votre site web. Enfin, vérifiez la gestion du mode de secours sur les appareils ou navigateurs qui pourraient restreindre le rendu 3D. Assurez-vous que la carte interactive ne bloque pas le défilement tactile de l'utilisateur sur les écrans mobiles, permettant ainsi aux visiteurs de faire défiler facilement la page au-delà de la carte pour lire le reste des détails de l'annonce immobilière.
Dépannage
Si la carte 3D intégrée ne se charge pas correctement ou affiche une erreur, plusieurs problèmes courants doivent être examinés. Une iframe vide est souvent le résultat de permissions de sécurité strictes ou de restrictions de rôle qui ont supprimé le code HTML personnalisé lors du processus d'enregistrement. Assurez-vous que votre compte d'utilisateur WordPress dispose des privilèges nécessaires pour publier du code HTML non filtré.
Un autre problème courant est un domaine bloqué ou incorrect. Étant donné que Georivo utilise des intégrations liées au domaine, le domaine public exact de votre site en direct doit être autorisé dans votre tableau de bord Georivo. Cela inclut la correspondance exacte du protocole (HTTPS) et des sous-domaines (comme la présence ou l'absence du préfixe www). En cas de non-correspondance, le moteur de rendu bloquera la demande pour protéger vos images géospatiales sous licence.
De plus, recherchez d'éventuelles erreurs de politique de sécurité de contenu (CSP) ou de contenu mixte dans la console de développement de votre navigateur. Des extensions de sécurité strictes ou des en-têtes de serveur peuvent bloquer les requêtes externes vers Georivo. Si vous rencontrez des problèmes de hauteur incorrecte ou de recadrage sur mobile, examinez votre conteneur CSS adaptatif pour vous assurer que le format d'affichage est préservé. Enfin, videz le cache de votre site WordPress, le cache du serveur et le cache du navigateur pour résoudre les problèmes de cache obsolète ou de blocage de consentement qui pourraient empêcher le chargement du code mis à jour.
Performance
L'intégration de contenus géospatiaux 3D riches et interactifs peut affecter la vitesse de chargement des pages de votre site web et les Core Web Vitals s'ils ne sont pas optimisés correctement. Pour maintenir des performances élevées et une bonne visibilité sur les moteurs de recherche, vous devez gérer comment et quand l'iframe Georivo s'initialise. La technique d'optimisation la plus efficace consiste à implémenter le chargement différé (lazy loading).
Vous pouvez ajouter l'attribut standard loading="lazy" directement à votre code d'iframe dans le bloc HTML personnalisé. Cet attribut indique au navigateur de retarder le chargement des ressources 3D lourdes jusqu'à ce que l'utilisateur fasse défiler la page vers la section contenant la carte. Cela empêche les éléments interactifs de bloquer le rendu initial du texte, des images principales et des menus de navigation, ce qui est particulièrement bénéfique pour les visiteurs sur mobile utilisant des réseaux plus lents.
Envisagez de placer la carte 3D sous la ligne de flottaison de votre mise en page plutôt qu'au tout début. Ce placement stratégique garantit que la métrique Largest Contentful Paint (LCP) de votre site reste optimisée, tout en offrant aux visiteurs le contexte textuel nécessaire sur la propriété avant qu'ils ne commencent à interagir avec la visualisation 3D. En combinant le chargement différé avec une conception de page réfléchie, vous pouvez proposer une présentation de localisation immersive sans compromettre les performances.
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é, les images, les limites légales, les exigences de la plateforme et les conditions actuelles auprès de la source faisant autorité compétente avant toute publication ou utilisation.
| Type de bloc WordPress | Cas d'utilisation recommandé | Prise en charge adaptative | Niveau de sécurité |
|---|---|---|---|
| Bloc HTML personnalisé | Code d'intégration d'iframe standard | Excellente avec conteneur CSS | Élevé (HTML non filtré restreint) |
| Bloc Shortcode | Constructeurs de pages obsolètes | Modérée | Moyen |
| Bloc Paragraphe | Non recommandé (supprime le code) | Aucune | Faible |
| Modèle de thème personnalisé | Intégrations globales sur tout le site | Excellente | Élevé |
Étapes pour intégrer une carte 3D Georivo dans un bloc WordPress en quelques minutes après l'intégration du
- Connectez-vous à votre tableau de bord d'administration WordPress et accédez à la page ou à l'article cible.
- Ajoutez un nouveau bloc HTML personnalisé à l'emplacement souhaité dans l'éditeur de blocs.
- Collez le code d'iframe adaptatif Georivo copié directement dans la zone de texte du bloc.
- Enveloppez l'iframe dans un conteneur CSS personnalisé pour préserver le format d'affichage standard.
- Prévisualisez le brouillon pour vérifier l'état de chargement initial et l'alignement de la mise en page.
- Publiez la page et testez l'URL en direct sur plusieurs appareils pour vérifier l'autorisation du domaine.
L'intégration de visualisations géospatiales interactives directement dans les annonces immobilières comble le fossé entre les images statiques et les visites physiques sur site, offrant aux acheteurs un contexte géographique immédiat.
Questions fréquentes
Pourquoi ma carte 3D intégrée affiche-t-elle un message d'erreur de domaine ?
Cette erreur se produit lorsque le domaine du site WordPress en direct ne correspond pas aux domaines autorisés configurés dans votre tableau de bord Georivo. Pour résoudre ce problème, connectez-vous à Georivo, accédez aux paramètres de votre widget et ajoutez votre domaine de site web exact à la liste des domaines autorisés.
Puis-je utiliser le bloc d'intégration standard de WordPress pour Georivo ?
Non, le bloc d'intégration standard de WordPress est conçu pour des fournisseurs oEmbed spécifiques. Étant donné que Georivo utilise des iframes sécurisées liées au domaine, vous devez utiliser le bloc HTML personnalisé pour coller directement le code de l'iframe.
Comment puis-je accélérer le chargement de la carte intégrée sur les appareils mobiles ?
Vous pouvez optimiser les performances en utilisant l'attribut loading="lazy" sur l'iframe. Cela garantit que les ressources de la carte 3D ne se chargent que lorsque l'utilisateur fait défiler la page à proximité de la carte, préservant ainsi la vitesse de chargement initiale de la page sur mobile.
Cette intégration nécessite-t-elle un fichier vidéo physique par drone ?
Non, Georivo utilise des images géospatiales 3D photoréalistes sous licence pour générer des présentations de localisation interactives. Il n'y a pas de fichiers vidéo lourds à héberger, à télécharger ou à diffuser sur votre serveur WordPress.
Que se passe-t-il si un utilisateur visite la page avec les cookies tiers bloqués ?
Les intégrations Georivo sont conçues pour respecter les normes de confidentialité modernes et ne s'appuient pas sur des cookies de suivi tiers pour charger l'expérience de carte 3D de base, garantissant ainsi une compatibilité élevée sur les navigateurs sécurisés.